html {
background: #f8f9fa !important;
}
body {
font-size: 1rem;
color: #334155;
background: #f8f9fa !important;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: "Manrope", sans-serif !important;
font-optical-sizing: auto;
}
p{
letter-spacing:0;
}
.app-content {
background: #f8f9fa;
top: 1rem;
-ms-border-radius: 8px;
border-radius: 8px;
margin: 11px 19px;
transition: margin 0.3s ease, padding 0.3s ease, top 0.3s ease;
}
.form-control-position {
top: -2px !important;
}
html body .form-control-position .la {
font-size: 1.3rem;
}
/*html body .la {
font-size: 12.16px;
}*/
#heat-map-overlay {
position: center;
top: 0;
z-index: 100;
width: 100%;
height: 100%;
display: none;
background: rgba(255, 255, 255, 0.6);
}
.navbar-light, .navbar-light.navbar-horizontal {
background: #f8f9fa;
}
.bg-green-background {
background: #185a9d;
background: -webkit-linear-gradient(to right, #185a9d, #19629b);
background: linear-gradient(to right, #185a9d, #19629b);
}
.cv-spinner {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 40px;
height: 40px;
border: 4px #ddd solid;
border-top: 4px #2e93e6 solid;
border-radius: 50%;
animation: sp-anime 0.8s infinite linear;
}
@keyframes sp-anime {
100% {
transform: rotate(360deg);
}
}
.border {
border: 1px solid #CBD5E1 !important;
}
.is-hide {
display: none;
}
input.input-validation-error {
border: 1px solid #dc3545 !important;
}
.validation-summary-errors {
color: #e32;
}
.admin-sidebar .menu .menu-item .menu-link {
padding: 6px 15px;
}
.kanban-col {
border-right: 0;
float: left;
width: 323px;
}
.kanban-col .card-body {
height: calc(100vh - 260px);
overflow: auto;
}
.mail-sidebar {
/*max-width: 160px;*/
}
table.kanban-table {
width: 100% !important;
}
.kanban-parent {
height: calc(100vh - 190px);
width: 807px;
}
table.kanban-table {
width: 100% !important;
}
.kanban-parent {
height: calc(100vh - 190px);
width: 807px;
}
.kanban-board {
display: flow-root;
width: 1313px;
background: none;
}
.list-item-summary {
display: flex;
align-items: flex-start;
}
.list-item-summary li {
margin-right: 45px !important;
}
.list-item-summary li dt {
font-weight: normal;
font-size: 1rem;
}
.entity-details dt,
.entity-details dd {
border-bottom: 1px solid #f5f5f5;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
}
.twitter-typeahead {
width: 100%;
}
.typeahead,
.tt-query,
.tt-input,
.tt-hint {
width: 100%;
}
.typeahead,
.tt-input,
.tt-hint {
/* width: 240px;*/
}
.tt-menu {
background: white;
border: 1px solid #eaedf3;
box-shadow: 0 0 1px #2e2d2d;
width: 100%;
}
a.tt-suggestion {
border-bottom: 1px solid #dbdbdb;
color: #3d3d3d;
display: block;
padding: 8px;
}
a.tt-suggestion:hover {
background: #eaeaea;
text-decoration: none;
}
.tt-cursor {
background: #ededed;
}
.search-result-name {
display: block;
font-size: 15px;
}
.search-result-type {
color: #727272;
display: block;
font-size: 14px;
}
table.dataTable > tbody > tr.child ul.dtr-details {
width: 85%;
}
table.dataTable > tbody > tr.child ul.dtr-details span.dtr-data {
display: inline-block;
padding-left: 15px;
}
.form-control {
-ms-border-radius: 8px;
border-radius: 8px;
border-color: #CBD5E1 !important;
padding: 0.55rem 0.65rem !important;
height: calc(1.25em + 1.8rem + 3px);
}
.select2-container--bootstrap4 .select2-selection__clear {
background-color: white;
color: #616161;
}
.select2-container--bootstrap4 .select2-selection__clear:hover {
background-color: #eaeaea;
}
.admin-main {
padding-top: 0px;
}
@media (max-width: 767px) {
.admin-main {
padding-top: 65px !important;
}
}
.admin-sidebar .menu .menu-item .menu-link .menu-icon .icon-placeholder {
font-size: 14px;
}
.modal-title {
font-size: 1.3rem;
font-weight: 600;
}
h1,
h2 {
font-weight: 600;
}
.badge {
/*padding: 7px 12px;*/
/*font-size: 0.9rem ;*/
border-radius: 8px;
background-color: rgb(233, 233, 233);
color: #282828;
}
.usable-height {
height: 100vh;
}
@media (min-width: 1200px) {
.container {
max-width: 1183px;
}
}
.pos .nav-item .active {
color: #6772e5;
font-weight: bold;
}
.avatar-sm {
height: 2rem;
width: 2rem;
}
.admin-sidebar-settings {
background-color: #263238;
}
.admin-sidebar-settings .menu .menu-item.active {
background: #293941;
}
.navbar-light .navbar-nav .nav-link {
color: rgb(30, 30, 30);
}
.required label:first-child {
/*color: #660000;*/
}
.required label:after {
color: #e32;
content: " *";
display: inline;
}
.required .list-group label:after {
content: "";
}
.required .list-group label:first-child {
/*color: #2b335e;*/
}
.todo-application .sidebar .todo-sidebar .todo-app-menu {
padding: 0rem;
}
.todo-application .sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list {
padding: 0 0rem 0 3rem;
}
.todo-application .sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list .list-group .list-group-item.active {
background-color: #e7e9f1 !important;
color: #000 !important;
}
.todo-application .sidebar .todo-sidebar .todo-app-menu .sidebar-menu-list .list-group .list-group-item {
/* border-radius: 1.25rem !important; */
padding: 0.6rem 1.5rem;
}
/*
.typeahead, .tt-query, .tt-input, .tt-hint {
width: 300px;
height: 35px;
padding: 10px 12px;
border-color: #eaedf3;
font-size: 14px;
line-height: 30px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
outline: none;
}
.tt-menu {
width: 300px;
background: white;
border: 1px solid #eaedf3;
box-shadow: 0 0 1px #2e2d2d;
}
.tt-dataset {
}
a.tt-suggestion {
display: block;
padding: 8px;
border-bottom: 1px solid #dbdbdb;
color: #3d3d3d;
}
a.tt-suggestion:hover {
text-decoration: none;
background: #eaeaea;
}
a.tt-cursor {
background: #ededed;
}
.search-result-name {
font-size: 15px;
display: block;
}
*/
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
.grid-span-2 {
grid-column: span 2/span 2;
}
html body .content {
min-height: calc(100% - 3rem);
}
html body .content .content-wrapper .content-header-title {
font-size: var(--fs-page-title, 20px);
font-weight: 700;
color: #1e1e1e;
line-height: 1.2;
margin: 0;
}
html body .content .content-wrapper .content-header {
padding: 12px 6px
}
/*body.vertical-layout.vertical-menu.menu-collapsed .content .content-wrapper .content-header {
padding: 14px 20px 3px 40px
}
*/
.progress-indicator.custom-complex {
/*background-color: #f1f1f1;*/
padding: 10px 5px;
border-radius: 10px;
width: 100%;
margin: 0 0 1em;
padding: 0;
text-transform: uppercase;
text-align: center !important;
}
.progress-indicator.custom-complex > li .bubble {
border-radius: 1000px;
width: 20px;
height: 20px;
display: block;
margin: 0 auto 0.5em;
border-bottom: 1px solid #888;
text-align: center !important;
}
.progress-indicator.custom-complex > li .bubble:before,
.progress-indicator.custom-complex > li .bubble:after {
display: none;
}
.progress-indicator > li {
list-style: none;
text-align: center !important;
width: auto;
padding: 0;
margin: 0;
position: relative;
text-overflow: ellipsis;
color: #bbb;
}
.progress-indicator > li.completed, .progress-indicator > li.completed .bubble {
color: #4CAF50;
}
.todo-application .border-bottom, .todo-application .border, .todo-application .form-control {
border-color: #d5d5d5 !important;
}
.modal-header {
padding-left: 2.5rem;
padding-top: 2.5rem;
padding-right: 2.5rem;
border-bottom: none;
}
form .form-group {
margin-bottom: 1rem !important;
}
.select2-container {
width: 100% !important;
}
.wizard-step .icon {
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
align-items: center;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
border-radius: 9999px;
border-width: 2px;
color: rgba(255, 255, 255, var(--tw-text-opacity));
display: flex;
font-size: 1.125rem;
height: 2.5rem;
line-height: 1.75rem;
margin-left: auto;
margin-right: auto;
width: 2.5rem;
}
.wizard-step .icon > span {
--tw-text-opacity: 1;
color: rgba(75, 85, 99, var(--tw-text-opacity));
}
.wizard-step .wizard-line {
--tw-bg-opacity: 1;
align-items: center;
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
border-radius: 0.5rem;
flex: 1 1 0%;
transform-origin: center;
vertical-align: middle;
width: 100%;
}
.wizard-step .wizard-line > div {
--tw-bg-opacity: 1;
background-color: rgba(110, 231, 183, var(--tw-bg-opacity));
border-radius: 0.25rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
width: 0;
}
.wizard-step-active .icon {
--tw-bg-opacity: 1;
align-items: center;
background-color: rgba(16, 185, 129, var(--tw-bg-opacity));
border-radius: 9999px;
display: flex;
font-size: 1.125rem;
height: 2.5rem;
line-height: 1.75rem;
margin-left: auto;
margin-right: auto;
width: 2.5rem;
}
.wizard-step-active .icon,
.wizard-step-active > span {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.wizard-step-active .wizard-line {
width: 0;
}
.wizard-step-active .wizard-line,
.wizard-step-active .wizard-line > div {
--tw-bg-opacity: 1;
background-color: rgba(110, 231, 183, var(--tw-bg-opacity));
border-radius: 1rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
}
.wizard-step-active .wizard-line,
.wizard-step-active .wizard-line > div {
width: 100%;
}
.main-menu.menu-light .navigation {
padding-top: 1rem !important;
}
.main-menu.menu-light .navigation > li > a {
padding: 6px 5px 8px 12px !important;
}
.main-menu.menu-light .navigation > li.active > a {
margin: 0 0.5rem;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a {
padding: 10px 0px 10px 18px;
}
.main-menu.menu-light .navigation > li.active > a {
padding: 3px 26px 5px 12px !important;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu {
width: 206px !important;
top: 5.5rem;
}
body.vertical-layout.vertical-menu.menu-expanded .content, body.vertical-layout.vertical-menu.menu-expanded .footer {
margin-left: 200px !important;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu .navigation > li > a > i:before {
font-size: 1.35rem !important;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu .navigation > li > a > i {
margin-right: 9px;
}
/*body.vertical-layout.vertical-menu.menu-collapsed .content,
body.vertical-layout.vertical-menu.menu-collapsed .footer {
margin-left: 200px !important;
}*/
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a > i:before {
font-size: 1.35rem !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a > i {
margin-right: 4px;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a {
padding: 10px 0px 10px 18px;
}
.main-menu.menu-light .navigation li a {
color: rgb(30, 30, 30) !important;
}
.main-menu.menu-light .navigation > li.active > a {
color: #b30000 !important;
}
.main-menu.menu-light .navigation > li.hover > a,
.main-menu.menu-light .navigation > li:hover > a {
color: #a10000 !important;
}
.main-menu.menu-light .navigation > li.active:hover > a {
color: #8f0000 !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .navbar .navbar-container {
margin-left: 76px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li.active > a {
margin: 0px 0px;
}
body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-container {
margin-left: 222px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li > a > i {
margin-right: 10px;
}
body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-header {
width: 210px;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu {
width: 210px !important;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .content, body.vertical-layout.vertical-menu-modern.menu-expanded .footer {
margin-left: 222px !important;
}
@media (min-width: 992px) {
body.vertical-layout.vertical-menu-modern .content, body.vertical-layout.vertical-menu-modern .footer {
margin-left: 222px;
}
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
color: #191c1d;
}
.main-menu.menu-light .navigation li a span {
/*font-size: .96rem !important*/
}
.main-menu.menu-light .navigation li a i {
font-size: 0.1rem !important;
}
.list-group-item {
padding: 0.6rem 1.1rem;
}
html body .content .content-wrapper .content-header-title {
letter-spacing: 0;
}
.main-menu.menu-light .navigation > li ul li > a {
padding: 9px 15px 2px 47px;
}
.main-menu.menu-light .navigation > li.open > ul > li:hover > a {
padding: 9px 15px 2px 50px;
}
.main-menu.menu-light .navigation > li.open > ul > li:active > a {
padding: 9px 15px 2px 47px;
}
.main-menu.menu-light .navigation > li.open > ul > li:hover.active > a {
padding: 9px 15px 2px 47px;
}
.bg-light-gray {
background-color: #f9fafb !important;
}
/* .card {
margin-bottom: 1.1rem;
} */
.main-menu.menu-light .navigation > li ul li > a {
padding: 7px 17px 7px 54px;
}
.main-menu.menu-light .navigation > li.open > ul > li:hover.active > a {
padding: 7px 18px 7px 40px;
}
.main-menu.menu-light .navigation > li.open > ul > li:hover > a {
padding: 7px 18px 7px 60px;
}
/* ---- Sidebar Figma Design Match ---- */
.main-menu {
background: #f8f9fa !important;
border-right: none !important;
box-shadow: none !important;
}
.main-menu .navbar-brand .brand-logo {
width: 32px;
height: 32px;
}
.main-menu.menu-light .navigation {
background: transparent !important;
}
.main-menu.menu-light .navigation > li {
margin: 2px 10px;
}
.main-menu.menu-light .navigation > li > a {
border-radius: 8px !important;
transition: all 0.15s ease;
}
.main-menu.menu-light .navigation > li ul {
background: transparent !important;
}
.main-menu.menu-light .navigation > li ul li > a {
color: #475569 !important;
border-radius: 6px;
}
.main-menu.menu-light .navigation > li.open > ul > li:hover > a,
.main-menu.menu-light .navigation > li.open > ul > li:active > a {
color: #1e293b !important;
background: rgba(255,255,255,0.5);
}
.main-menu.menu-light .navigation > li.open > ul > li:hover.active > a {
color: #1e293b !important;
background: #fff;
}
/* ---- Header Figma Design Match ---- */
.header-navbar {
background: #f8f9fa !important;
box-shadow: none !important;
}
.header-navbar .navbar-container ul.nav li i.ficon {
font-size: 1.2rem;
color: #475569;
}
.header-navbar .navbar-container ul.nav li a.nav-link-label {
padding: 2.2rem 0.1rem 1.7rem 0.6rem;
color: #475569;
}
.header-navbar .navbar-container ul.nav li a.nav-link-search, .header-navbar .navbar-container ul.nav li a.nav-link-expand {
padding: 2rem 0.6rem 1.7rem 0.6rem;
color: #475569;
}
.header-navbar .navbar-container ul.nav li a.nav-link-search:hover,
.header-navbar .navbar-container ul.nav li a.nav-link-expand:hover,
.header-navbar .navbar-container ul.nav li a.nav-link-label:hover {
color: #1e293b;
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name:hover {
color: #1e293b;
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link .user-name {
font-size: 1.05rem;
color: #191c1d;
font-weight: 600;
}
/* ---- Search Bar Figma Style ---- */
.ais-SearchBox-input,
#searchbox input[type="search"],
#searchbox .ais-SearchBox-input {
background: #e7e8e9 !important;
border: none !important;
border-radius: 12px !important;
padding: 9px 16px 10px 40px !important;
font-size: 0.875rem;
color: #191c1d;
box-shadow: none !important;
}
.ais-SearchBox-input::placeholder,
#searchbox input[type="search"]::placeholder {
color: #6b7280;
}
/* ---- Global Card Styles ---- */
.card {
border: none !important;
border-radius: 16px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
background: #fff;
}
.card .card-header {
background: transparent;
border-bottom: none;
border-radius: 16px !important;
}
.card .card-body {
padding: 1.5rem;
}
/* ---- Global Button Styles ---- */
.btn-primary {
background-color: #1e293b !important;
border-color: #1e293b !important;
border-radius: 8px;
}
.btn-primary:hover, .btn-primary:focus {
background-color: #334155 !important;
border-color: #334155 !important;
box-shadow: 0 4px 6px -4px rgba(30,41,59,0.2) !important;
}
.btn-outline-primary {
color: #1e293b !important;
border-color: #1e293b !important;
border-radius: 8px;
}
.btn-outline-primary:hover {
background-color: #1e293b !important;
border-color: #1e293b !important;
color: #fff !important;
}
/* ---- Badge/Tag Styles ---- */
.badge-primary {
background-color: #1e293b !important;
}
/* ---- Tab Navigation ---- */
.nav-tabs {
border-bottom: 1px solid #e2e8f0;
}
.nav-tabs .nav-link {
color: #475569;
font-weight: 500;
font-size: 0.875rem;
border: none;
border-bottom: 2px solid transparent;
padding: 0.75rem 1.25rem;
transition: all 0.15s ease;
}
.nav-tabs .nav-link:hover {
color: #1e293b;
border-bottom-color: rgba(30,41,59,0.3);
}
.nav-tabs .nav-link.active {
color: #1e293b;
font-weight: 700;
border-bottom: 2px solid #1e293b;
background: transparent;
}
/* ---- Link Colors ---- */
a {
color: #1e293b;
}
a:hover {
color: #334155;
}
/* ---- Table Styles ---- */
.table thead th {
font-size: 0.62rem;
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.8px;
border-bottom: 1px solid #e2e8f0;
}
.table td {
/*color: #334155;*/
border-bottom: 1px solid #f1f5f9;
}
/* ---- Form Controls ---- */
.form-control {
border-radius: 8px;
border: 1px solid #e2e8f0;
font-size: 0.875rem;
padding: 0.5rem 0.75rem;
}
.form-control:focus {
border-color: #1e293b;
box-shadow: 0 0 0 2px rgba(30,41,59,0.1);
}
/* ---- Page Content Container ---- */
.btn-sm, .btn-group-sm > .btn {
/*padding: 0.60rem 0.85rem;*/
font-size: 0.885rem;
}
.modal-right {
position: fixed;
top: 10px;
right: 10px !important;
left: auto;
height: 98% !important;
z-index: 1050;
}
@media (min-width: 575.98px) {
.modal-fullscreen {
padding: 0 !important;
}
.modal-fullscreen .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen .modal-body {
overflow-y: auto;
}
.modal-right-sm {
width: 100% !important;
}
.modal-right-60 {
width: 100% !important;
}
}
@media (min-width: 767.98px) {
.modal-fullscreen-sm {
padding: 0 !important;
}
.modal-fullscreen-sm .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-sm .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-sm .modal-body {
overflow-y: auto;
}
.modal-right-sm {
width: 100% !important;
}
.modal-right-60 {
width: 100% !important;
}
}
@media (min-width: 991.98px) {
.modal-fullscreen-md {
padding: 0 !important;
}
.modal-fullscreen-md .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-md .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-md .modal-body {
overflow-y: auto;
}
.modal-right-sm {
width: 50% !important;
}
}
@media (min-width: 1199.98px) {
.modal-fullscreen-lg {
padding: 0 !important;
}
.modal-fullscreen-lg .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-lg .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.modal-fullscreen-lg .modal-body {
overflow-y: auto;
}
.modal-right-sm {
width: 50% !important;
}
}
.modal-fullscreen-xl {
padding: 0 !important;
}
.modal-fullscreen-xl .modal-dialog {
width: 100%;
max-width: none;
height: 100%;
margin: 0;
}
.modal-fullscreen-xl .modal-content {
height: 100%;
border: 0;
}
.modal-fullscreen-xl .modal-body {
overflow-y: auto;
overflow-x: inherit;
}
.modal-right {
right: 10px !important;
width: 98.5%;
}
.main-menu.menu-light .navigation > li:hover {
/*background: #e2e8f0;*/
border-radius: 12px;
}
.vertical-overlay-menu .main-menu .navigation > li > a > i:before {
font-size: 1.45rem;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation > li > a > i:before {
font-size: 1.5rem;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu .navigation > li > a i:before {
font-size: 1.45rem;
}
.navbar-light .navbar-nav li {
line-height: 0.5;
}
.navbar-dark {
background: #24283d;
}
.header-navbar {
max-height: 8rem;
}
.header-navbar .navbar-header .navbar-brand .brand-logo {
width: 22px;
height: auto;
vertical-align: middle;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu li.menu-collapsing-button {
position: fixed !important;
bottom: 0;
left: 0;
background: #f8f9fa;
width: 220px;
text-align: right;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu li.menu-collapsing-button {
position: fixed !important;
bottom: 60px;
left: 3px;
background: #f8f9fa;
text-align: right;
}
html body.fixed-navbar {
padding-top: 4rem;
padding-left: 0;
padding-right: 0;
}
.main-menu.menu-fixed {
top: 3rem;
height: calc(100% - 3rem);
}
.main-menu.menu-light {
}
.main-menu.menu-light .navigation > li > ul {
/*background: #f8f9fa !important;*/
}
.main-menu.menu-light .navigation {
/*background: #f8f9fa !important;*/
}
.main-menu.menu-light .navigation > li.active > a {
background: transparent;
font-weight: normal;
}
.main-menu.menu-light .navigation > li ul .active > a {
font-weight: normal;
}
.main-menu.menu-light .navigation > li.menu-collapsed-open > a,
.main-menu.menu-light .navigation > li.open > a {
border-right: none;
}
.main-menu.menu-light .navigation > li ul .active > a {
background: transparent;
color: #1e293b !important;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
color: #1e293b !important;
}
.shadow-sm {
box-shadow: 0 0.125rem 0.1rem rgba(0, 0, 0, 0.08) !important;
}
.dashboard {
padding-top: 15px;
}
.dashboard .card {
background: #fff !important;
border: none !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
border-radius: 16px !important;
}
.dashboard .card .card-header {
background: #fff !important;
border-bottom: none;
border-radius: 16px 16px 0 0 !important;
padding: 1.25rem 1.5rem 0.5rem;
}
.dashboard .card .card-body {
padding: 0.5rem 1.5rem 1.25rem;
}
.dashboard .card-stats .card-title {
font-size: 0.7rem !important;
font-weight: 500;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
html body .content .content-wrapper {
/*background: #fff;*/
padding: 0rem 0rem 0rem 0rem
}
body.vertical-layout.vertical-menu.menu-expanded .content .content-wrapper {
padding-left: 1rem;
}
.card-header {
background-color: transparent;
padding: 0.8rem 1rem;
margin-bottom: 0;
border-bottom: none;
}
.card-header .heading-elements, .card-header .heading-elements-toggle {
top: 10px;
}
.header-with-background {
background: #f9fafb;
}
.card-footer {
border-top: 0;
font-size: 0.85rem;
}
.bg-gradient-directional-yellow {
background-image: linear-gradient(45deg, #f3f3fa, #f3f3fa);
border: 1px solid white;
}
.bg-gradient-directional-yellow:hover {
background-image: linear-gradient(45deg, #ececf2, #ececf2);
border: 1px solid rgb(210, 228, 228);
}
.nav.nav-tabs .nav-item .nav-link {
font-size: 1rem;
/* font-weight: 600 !important; */
}
.nav.nav-tabs .nav-item .nav-link.active {
background-color: #fff;
border-radius: 0.25rem 0.25rem 0 0;
border-color: #e9ebf1 #e9ebf1 #fff;
}
form .nav.nav-tabs .nav-item .nav-link {
font-size: 1rem !important;
}
.bg-light {
background-color: #f9fafb !important;
border: 1px dotted #f1f2f3;
}
#timeline.timeline-left .timeline-item:before {
border-right: 12px solid #f8f8fd;
}
.navbar-container .search-input .input {
padding: 1.9rem 2.3rem 1.5rem;
}
.border-bottom {
border-bottom: 1px solid #f8f8fd !important;
}
html body a {
color: #1f2021;
}
html body a:hover {
color: #0079c7;
}
.btn-link {
color: #424242;
}
.dataTable tr {
cursor: pointer;
}
/*div.dataTables_wrapper {
min-height: 500px;
}*/
div .fg-toolbar.ui-toolbar.ui-corner-tl {
position: inherit;
}
div.fg-toolbar.ui-toolbar.ui-corner-bl {
position: absolute;
bottom: 0;
width: 100%;
}
div.dataTables_paginate {
position: relative;
float: right;
}
.table th, .table td, table.dataTable.no-footer {
border-top: 1px solid #f2f2f8;
border-bottom: none;
}
.badge-default {
background-color: #607D8B;
}
.list-item-summary li dd {
font-size: 0.95rem;
}
.header-navbar .navbar-container ul.nav li > a.nav-link {
font-size: 1.3rem;
}
.bg-cream {
background-color: #FFFDE7 !important;
}
.modal-footer {
border-top: 1px solid #f9f9f9;
}
.sw-theme-arrows > ul.step-anchor > li > a:after {
border-left: 30px solid #ffffff;
}
.sw-theme-arrows > ul.step-anchor {
border: 1px solid #ddd !important;
background: rgba(255, 253, 231, 0.2509803922);
}
.card .card-title {
font-weight: 500;
font-size: 14px !important;
}
.card-stats .card-body {
padding-top: 3px;
}
.btn-tool {
padding: 15px;
padding-top: 0;
}
body.vertical-layout.vertical-menu .main-menu .main-menu-content {
padding-top: 0px;
}
.nav-tabs {
border-bottom: 1px solid #e6e9ed;
}
@media (max-width: 991.98px) {
.vertical-overlay-menu .navbar .navbar-header {
width: 100% !important;
}
}
@media (max-width: 767.98px) {
.header-navbar .navbar-header {
padding: 2px 15px !important;
}
.header-navbar .navbar-header .navbar-brand {
padding: 15px 0px !important;
}
.vertical-overlay-menu .navbar .navbar-header {
width: 100% !important;
}
.header-navbar {
max-height: 2rem;
}
.header-navbar .navbar-header .navbar-brand {
padding: 15px 0px !important;
}
}
.app-content .wizard > .steps > ul > li.current .step {
border-color: #2196F3;
background-color: #fff;
color: #2196F3;
}
.app-content .wizard > .steps > ul > li.done .step {
background-color: #2196F3;
border-color: #2196F3;
color: #fff;
}
.app-content .wizard > .actions > ul > li > a {
background-color: #2196F3;
}
.badge-up {
position: absolute;
top: 17px;
right: 13px;
font-size: 0.7rem;
}
@media (min-width: 576px) {
.modal-dialog-scrollable .modal-content {
/*max-height: calc(100vh - 0rem) !important;*/
}
}
@media (min-width: 576px) {
.modal-dialog-scrollable {
max-height: calc(100% - 0rem);
}
}
.select-app :hover h5 {
color: #B71C1C !important;
}
.select-app:hover i {
color: #B71C1C;
}
.select-app:hover span {
color: #B71C1C;
}
.report-footer {
border-top: #eef3f7 3px double;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .navbar .navbar-header {
float: left;
width: 199px;
}
.navbar-separator {
background: #e5e5e5;
height: 25px !important;
width: 1px;
position: absolute;
bottom: 24px;
}
.modal-body {
padding-left: 2.9rem;
padding-top: 1rem;
padding-right: 2rem;
}
.maintain-space {
white-space: pre-line;
}
.btn-sm, .btn-group-sm > .btn {
-ms-border-radius: 6px;
border-radius: 6px;
}
.details-page-title {
font-weight: 500;
font-size: 1.2rem;
}
.content-header-right {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
flex-wrap: nowrap;
}
.content-header-right .btn {
border-radius: 8px;
font-weight: 600;
font-size: var(--fs-small, 0.88rem);
white-space: nowrap;
}
.content-header-right .dropdown {
display: inline-flex;
}
.content-header-right .btn-more-menu {
width: 41px;
height: 41px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #e2e8f0;
background: #fff;
transition: background 0.15s, border-color 0.15s;
}
.content-header-right .btn-more-menu:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.content-header-right .dropdown-menu {
border-radius: 10px;
border-color: #e2e8f0;
box-shadow: 0 4px 16px rgba(0,0,0,0.08);
padding: 0.35rem 0;
}
.content-header-right .dropdown-item {
padding: 0.45rem 1rem;
font-size: 0.9rem;
}
.text-primary {
color: #1396eb !important;
}
a.text-primary:hover, a.text-primary:focus {
color: #0878d1 !important;
}
/*.list-group-item {
background-color: #f4f5fa;
border: 1px solid #e4e7ed;
}
*/
a.list-group-item {
color: #3e3e3f;
}
.email-application a {
color: #1396eb;
}
.sidebar-left a {
color: #6b6f82;
}
.email-application .app-content .sidebar .email-app-sidebar {
width: 180px;
}
@media (min-width: 992px) {
.sidebar {
width: 180px;
}
.email-application .app-content .content-right {
width: calc(100% - 180px);
}
}
.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .list-group .list-group-item.active {
background-color: #1e9ff2;
}
.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .list-group .list-group-item {
padding: 7px 28px 7px 13px !important;
}
.email-application .app-content .sidebar .email-app-sidebar .email-app-menu .sidebar-menu-list {
padding: 0 0.8rem;
}
.email-application .content-header-right a {
color: #fff;
}
.email-application .app-content .content-right {
padding: 20px;
background-color: transparent;
}
table.dataTable td.dt-control:before {
background: url("https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_open.png") no-repeat center center;
content: "" !important;
cursor: pointer;
}
table.dataTable tr.shown td.dt-control:before {
background: url("https://cdn.rawgit.com/DataTables/DataTables/6c7ada53ebc228ea9bc28b1b216e793b1825d188/examples/resources/details_close.png") no-repeat center center !important;
content: "" !important;
cursor: pointer;
}
@media only screen and (max-width: 800px) {
/* Force table to not be like tables anymore */
#tables-card table, #tables-card thead, #tables-card tbody, #tables-card th, #tables-card td, #tables-card tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
#tables-card thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
#tables-card tr {
border: 1px solid #ccc;
margin-top: 1px;
}
#tables-card td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #e3e3e3;
margin-top: 3px;
position: relative;
padding-left: 45%;
white-space: normal;
text-align: left;
}
#tables-card td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
text-align: left;
font-weight: bold;
}
/*
Label the data
*/
#tables-card td:before {
content: attr(data-title);
}
}
.main-menu.menu-light .navigation > li {
padding: 1px;
}
.kanban-container .kanban-board .kanban-board-header {
font-size: 1.1rem !important;
}
.badge-cyan {
background: rgb(44, 200, 186);
color: #ffffff;
}
.badge-blue {
background: rgb(8, 174, 234);
color: #ffffff;
}
.badge-light-green {
background: rgb(116, 203, 128);
color: #ffffff;
}
.badge-brown {
background: rgb(197, 160, 112);
color: #ffffff;
}
.badge-yellow {
background: rgb(251, 193, 30);
color: #ffffff;
}
.badge-light-blue {
background: rgb(78, 211, 229);
color: #ffffff;
}
.badge-red {
background: rgb(245, 107, 98);
color: #ffffff;
}
.font-size-small {
font-size: 0.7rem;
}
.kanban-container .kanban-board .kanban-board-header .kanban-title-board {
font-weight: 600 !important;
}
.todo-application .todo-app-list-wrapper .todo-app-list .todo-task-list .todo-task-list-wrapper .todo-item {
padding: 0.6rem 0.8rem 0.3rem 0.5rem !important;
border-right: 1px solid #e4e5ec;
}
.kanban-container .kanban-board .kanban-board-header .kanban-title-button {
position: absolute;
top: 38px;
left: 16px;
bottom: unset !important;
}
.bg-gradient-x-success {
background-image: linear-gradient(to right, #66BB6A 0%, #3ca980 100%);
}
.HW_badge_cont {
padding: 0rem 0.6rem 1.6rem 1.6rem;
margin-top: 1.5rem;
}
.created-entity {
font-size: 1.8rem;
margin-bottom: 0.5rem;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.2;
}
.select-app {
background: rgba(255, 255, 255, 0.5215686275);
border: 2px solid #ffffff;
padding: 1rem;
border-radius: 8px;
border: 0px solid #f4f4f5;
margin-bottom: 8px;
box-shadow: rgb(237, 234, 233) 0px 0px 0px 1px, rgba(109, 110, 111, 0.08) 0px 1px 3px 0px;
}
.select-app:hover {
background: #f7f7f7;
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
padding: 1.65rem 0.3rem;
}
.trumbowyg-editor, .trumbowyg-textarea {
min-height: 215px;
}
.entity-print-preview {
min-width: 700px;
max-width: 1500px;
min-height: 800px;
box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.15) !important;
margin: 0 auto;
}
.entity-print-preview .table th {
padding: 0.75rem !important;
border: 0;
border-bottom: 0 !important;
color: #f4faff;
border-top: 0 !important;
}
.entity-print-preview .table td {
padding: 0.75rem !important;
border: 0;
border-bottom: 0 !important;
border-top: 0 !important;
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
color: #fff;
background-color: #545766 !important;
border-color: #4e515f !important;
}
.btn-secondary-activity {
border-color: #bdbec1 !important;
background-color: #fdfdff !important;
color: #383838;
}
.btn-secondary-activity .active {
border-color: #bdbec1 !important;
background: #505050 !important;
/* color: #ffffff; */
}
.bar {
--d: 1rem; /* arrow depth */
--gap: 0.3rem; /* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #f9fafb;
color: #3d3d3d;
clip-path: polygon(0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
border-radius: 6px;
}
.bar-step a {
color: #6d6d6d;
width: 100%;
height: 100%;
padding: 0.5rem var(--d);
}
.bar-step:first-child {
clip-path: polygon(0% 0%, calc(100% - var(--d)) 0%, 100% 50%, calc(100% - var(--d)) 100%, 0% 100%);
}
.bar-step:last-child {
clip-path: polygon(0% 0%, calc(100% - var(--d)) 0%, 1000% 0%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%);
}
.bar-step.active {
background: #dadbe1;
color: #352f2f;
}
.bar-step.active a {
color: #352f2f;
background: #dadbe1;
}
.bar-step.current-status {
background: #95969d;
color: #ffffff;
}
.bar-step.current-status a {
background: #95969d;
color: #ffffff;
}
.bar-step:hover, .bar-step a:hover,
.bar-step.active a:hover {
background: #42A5F5;
color: #ffffff;
cursor: pointer;
}
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after {
right: 20px;
top: 8px;
}
.email-application .app-content {
border: 0;
}
.modal-right-35 {
width: 35% !important;
}
.modal-right-25 {
width: 25% !important;
min-width: 415px !important;
}
.modal-right-60 {
width: 60% !important;
min-width: 500px !important;
}
@media (max-width: 767.98px) {
.modal-right-35 {
width: 100% !important;
}
}
.modal-right-45 {
width: 45% !important;
}
.modal-right-75 {
width: 75% !important;
}
.modal-right-40 {
width: 40% !important;
}
@media (max-width: 767.98px) {
.modal-right-45 {
width: 100% !important;
}
.modal-right-40 {
width: 100% !important;
}
.modal-right-60 {
width: 100% !important;
}
.modal-right-75 {
width: 100% !important;
}
}
div.shimmer {
height: 100%;
width: 100%;
background: linear-gradient(-45deg, #fff 40%, #f9fafb 50%, #fff 60%);
background-size: 300%;
background-position-x: 100%;
animation: shimmer 1s infinite linear;
}
.logo-loader {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 600px;
}
.shimmer-line {
background-color: #e9ecef;
border-radius: 4px;
animation: shimmer-pulse 1.2s ease-in-out infinite;
}
@keyframes shimmer-pulse {
0% { opacity: 1; }
50% { opacity: 0.4; }
100% { opacity: 1; }
}
/* Order Card Skeleton Shimmer */
.order-card-skeleton {
background: #fff;
border-radius: 8px;
border: 2px solid #f1f5f9;
padding: 0;
margin-bottom: 20px;
overflow: hidden;
}
.order-card-skeleton .skeleton-header,
.order-card-skeleton .skeleton-info,
.order-card-skeleton .skeleton-items {
padding-left: 1rem;
padding-right: 1rem;
}
.skeleton-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: 4px;
}
@keyframes skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ui-loading: shimmer overlay for active partial/form while ajax is in flight */
.ui-shimmer-overlay {
position: absolute;
inset: 0;
z-index: 20;
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.55) 25%,
rgba(240, 240, 240, 0.75) 50%,
rgba(255, 255, 255, 0.55) 75%);
background-size: 200% 100%;
animation: skeleton-shimmer 1.5s ease-in-out infinite;
border-radius: inherit;
pointer-events: all;
cursor: wait;
}
.ui-loading-active {
pointer-events: none;
}
/* ui-loading: button processing state */
.ui-loading-btn {
cursor: wait !important;
opacity: 0.85;
}
.ui-loading-btn .fa-spinner,
.ui-loading-btn .fa-spin {
margin-right: 0.35rem;
}
/* ui-loading: indeterminate top progress bar (fallback when no target inferred) */
.ui-top-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
width: 100%;
z-index: 3000;
background: transparent;
pointer-events: none;
opacity: 0;
transition: opacity 120ms ease;
}
.ui-top-progress.is-active {
opacity: 1;
}
.ui-top-progress.is-active::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40%;
background: linear-gradient(90deg, transparent, #4e73df 40%, #788BF1 60%, transparent);
animation: ui-top-progress-slide 1.1s linear infinite;
}
@keyframes ui-top-progress-slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
.skeleton-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding-top: 0.85rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid #f1f5f9;
}
.skeleton-header-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.skeleton-icon {
width: 32px;
height: 32px;
border-radius: 8px;
}
.skeleton-title {
width: 80px;
height: 14px;
margin-bottom: 6px;
}
.skeleton-timer {
width: 60px;
height: 12px;
}
.skeleton-badge {
width: 70px;
height: 24px;
border-radius: 12px;
}
.skeleton-info {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
padding-top: 0.65rem;
padding-bottom: 0.65rem;
border-bottom: 1px solid #f1f5f9;
}
.skeleton-customer {
width: 140px;
height: 14px;
margin-bottom: 8px;
}
.skeleton-meta {
width: 100px;
height: 12px;
}
.skeleton-amount {
width: 80px;
height: 16px;
margin-bottom: 6px;
}
.skeleton-reference {
width: 90px;
height: 12px;
}
.skeleton-items {
padding: 0.5rem 1rem 0.25rem;
}
.skeleton-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0;
}
.skeleton-item-status {
width: 60px;
height: 20px;
border-radius: 4px;
}
.skeleton-item-qty {
width: 24px;
height: 24px;
border-radius: 4px;
}
.skeleton-item-name {
flex: 1;
height: 14px;
}
.skeleton-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.55rem 1rem;
background: #f1f5f9;
}
.skeleton-btn {
width: 65px;
height: 28px;
border-radius: 6px;
}
.skeleton-actions {
display: flex;
gap: 0.35rem;
}
.skeleton-action-icon {
width: 28px;
height: 28px;
border-radius: 6px;
}
/* Skeleton Grid */
.order-skeleton-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.order-skeleton-grid .order-card-skeleton {
flex: 0 0 calc(25% - 0.75rem);
max-width: calc(25% - 0.75rem);
}
@media (max-width: 1200px) {
.order-skeleton-grid .order-card-skeleton {
flex: 0 0 calc(33.333% - 0.67rem);
max-width: calc(33.333% - 0.67rem);
}
}
@media (max-width: 992px) {
.order-skeleton-grid .order-card-skeleton {
flex: 0 0 calc(50% - 0.5rem);
max-width: calc(50% - 0.5rem);
}
}
@media (max-width: 576px) {
.order-skeleton-grid .order-card-skeleton {
flex: 0 0 100%;
max-width: 100%;
}
}
@keyframes shimmer {
to {
background-position-x: 0%;
}
}
/*
div.shimmer-dark {
height: 100%;
width: 100%;
background: linear-gradient(-45deg, #212121 40%, #65666a 50%, #212121 60%);
background-size: 300%;
background-position-x: 100%;
animation: shimmer 1s infinite linear;
}
@keyframes shimmer-dark {
to {
background-position-x: 0%
}
} */
.table-layout {
border: 1px dotted #d9d1d1 !important;
min-height: 593px;
}
.floor-table {
padding: 0.6rem !important;
cursor: pointer;
}
.floor-table .card :hover {
background-color: #f5f5f5 !important;
border-radius: 0.45rem;
}
.table-occupied {
color: #860000 !important;
}
.order-processing-new {
background-color: #ffc200 !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-accepted {
background-color: #ffc200 !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-preparing {
background-color: #ff642d !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-ready {
background-color: #b0dd49 !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-served {
background-color: #00bcd4 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-cancelled {
background-color: #5d0007 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
color: white !important;
}
.order-processing-out-for-delivery {
background-color: rgb(255, 100, 45) !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-delivered {
background-color: rgb(233, 247, 195) !important;
color: #212121 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-credit-sale {
background-color: rgb(233, 233, 233) !important;
/*color: #fff !important;*/
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-picked {
background-color: rgb(99, 171, 243) !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.order-processing-closed {
background-color: rgb(185, 185, 185) !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
}
.kanban-board .order-processing-new {
background-color: transparent !important;
color: #26a69a !important;
}
.kanban-board .order-processing-accepted {
background-color: transparent !important;
color: #4caf50 !important;
}
.kanban-board .order-processing-preparing {
background-color: transparent !important;
color: #ffc107 !important;
}
.kanban-board .order-processing-ready {
background-color: transparent !important;
color: #3B82F6 !important;
}
.kanban-board .order-processing-served {
background-color: transparent !important;
color: #00bcd4 !important;
}
.kanban-board .order-processing-cancelled {
background-color: transparent !important;
color: #9e9e9e !important;
}
.kanban-board .order-processing-out-for-delivery {
background-color: transparent !important;
color: #E91E63 !important;
}
.kanban-board .order-processing-delivered {
background-color: transparent !important;
color: #ff5722 !important;
}
.kanban-board .order-processing-picked {
background-color: transparent !important;
color: #009688 !important;
}
.bg-blue-grey.bg-lighten-2, .btn-blue-grey.btn-lighten-2 {
background-color: #ffffff !important;
border-radius: 8px;
border: 1px solid #b9b9b9;
}
.bg-blue-grey.bg-lighten-3, .btn-blue-grey.btn-lighten-3 {
background-color: #ffffff !important;
border: 1px solid #c5c5c5;
border-radius: 8px;
}
/*.order-summary a {
color: #3d3d3d !important;
}
.order-summary a:hover {
color: #2196f3 !important;
}*/
.list-group-item-action:focus, .list-group-item-action:hover {
z-index: 1;
color: #4e5154;
background-color: #fbfbfb;
}
.bg-blue-grey.bg-lighten-2 :hover, .btn-blue-grey.btn-lighten-2 :hover {
background: #1e293b !important;
color: white;
border-radius: 8px;
}
.bg-blue-grey.bg-lighten-3:hover h3,
.bg-blue-grey.bg-lighten-2 :hover h3,
.bg-blue-grey.bg-lighten-2 :hover h6 {
color: white;
}
.bg-blue-grey.bg-lighten-3:hover, .btn-blue-grey.btn-lighten-3:hover {
background: #1e293b !important;
color: white;
border-radius: 8px;
}
.product-category .active {
border: 1px solid #dfdfdf;
font-weight: 700;
background: #1e293b !important;
color: white;
}
.product-category :hover {
color: white !important;
}
.product-category .active h3 {
color: white;
}
.orders-open-count {
background: #334155 !important;
color: #F1F5F9 !important;
font-weight: 500;
}
.orders-accepted-count {
background: #fff0ea !important;
color: #ff642d !important;
font-weight: 500;
}
.orders-ready-count {
background: #3B82F6 !important;
color: #DBEAFE !important;
font-weight: 500;
}
.orders-cancelled-count {
background: #B30000 !important;
color: #F4D9D9 !important;
font-weight: 500;
}
.orders-closed-count {
background: #16A34A !important;
color: #DCFCE7 !important;
font-weight: 500;
}
.dropdown-item {
padding: 0.45rem 1.5rem;
}
.navigation, .navigation .navigation-header {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
}
.header-navbar {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
}
.btn {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
-ms-border-radius: 6px;
border-radius: 6px;
}
.btn i {
top: 2px;
font-size: 1.1rem;
}
.h4, .h5, .h6, h4, h5, h6 {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
}
.h1, .h2 .h3, h1, h2, h3 {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 300;
}
/* .h5, h5 {
font-size: 1.25rem;
} */
.breadcrumb {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
}
.todo-application .content-right .todo-app-list-wrapper {
border-left: 0;
border-right: 0;
}
.todo-application .todo-app-list-wrapper .todo-app-list .todo-task-list .todo-task-list-wrapper .todo-item {
border-right: 0;
}
.todo-application .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list .todo-task-list-wrapper .todo-item .todo-title {
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
color: #202020;
}
.todo-application .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list {
height: calc(100vh - 17.12rem);
}
.btn-outline-secondary {
color: #0F172A;
}
.btn-blue-outline-secondary {
background-color: #2b83c9 !important; /* Bootstrap blue */
color: #fff !important; /* White text */
border: 1px solid rgb(185, 185, 185) !important; /* Black border */
}
.btn-blue-outline-secondary:hover, .btn-blue-outline-secondary:focus {
background-color: #6c757d !important; /* Bootstrap gray */
color: #fff !important;
border: 1px solid rgb(185, 185, 185) !important;
}
/* .text-dark {
color: #5a5b67 !important;
}
*/
.header-navbar .navbar-header .navbar-brand .brand-text {
display: inline-block;
line-height: 1;
}
.header-navbar .navbar-header .navbar-brand .brand-text img {
width: 70px;
height: auto;
vertical-align: middle;
}
body.vertical-layout.vertical-menu.menu-collapsed .header-navbar .navbar-header .navbar-brand .brand-text {
display: none !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .header-navbar .navbar-header {
overflow: hidden;
width: 70px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .header-navbar .navbar-header .navbar-brand {
padding: 10px 0 !important;
justify-content: center;
width: 100%;
overflow: hidden;
}
body.vertical-layout.vertical-menu.menu-collapsed .header-navbar .navbar-header .navbar-brand .brand-logo {
width: 24px;
max-width: 24px;
max-height: 24px;
}
.main-menu .navbar-brand {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 19px 13px 5px 21px;
}
.main-menu .navbar-brand .brand-logo {
width: 25px;
height: auto;
}
.main-menu .navbar-brand .brand-text {
display: inline-block;
line-height: 1;
padding-top: 5px;
padding-left: 3px;
}
.main-menu .navbar-brand .brand-text img {
width: 96px;
height: auto;
}
/* Collapsed state */
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navbar-brand .brand-text {
display: none !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navbar-brand {
padding: 19px 19px 4px 19px !important;
justify-content: center;
overflow: hidden;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navbar-brand .brand-logo {
width: 24px;
max-width: 24px;
max-height: 24px;
}
.col-form-label {
font-size: 1.05rem;
}
.btn-sm, .btn-group-sm > .btn {
font-size: 1rem;
}
.text-body {
color: #64748B !important
}
.text-muted {
color: #64748B !important
}
.step-app > .step-steps > li.done {
background-color: #ccefdc;
color: #343333;
}
.step-app > .step-steps > li.active {
background-color: #def3e8;
color: #343434;
}
.step-app > .step-steps > li {
font-weight: 600;
}
.step-app > .step-footer > .step-btn {
padding: 9px 22px;
color: #4e4e4e !important;
font-weight: bold;
}
/* body {
background: linear-gradient(180.21deg, #FFF9F9 -64.58%, rgba(255, 255, 255, 0.1) 115.31%), linear-gradient(90deg, #03A9F4 0%, #FFC368 50%, #e8a8aa 100%) !important;
} */
.tp-hero-five__ptb-5 {
padding-top: 220px;
padding-bottom: 89px;
}
.tp-hero-five__shape-2 {
position: absolute;
top: 14%;
left: -3%;
animation: moving 9s linear infinite;
}
.tp-hero-five__shape-3 {
position: absolute;
top: 27%;
left: 3%;
animation: movingleftright1 infinite 18s;
}
.tp-hero-five__shape-4 {
position: absolute;
bottom: 12%;
left: 45%;
animation: moving 9s linear infinite;
}
.border-light {
border: 1px solid #ededed !important;
}
.select2-container--classic .select2-selection--multiple .select2-selection__choice, .select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #64B5F6 !important;
}
.typeahead {
padding: 0 5px;
margin-top: 10px;
width: 300px;
height: 30px;
font-size: 14px;
line-height: 30px;
max-width: none;
}
.tt-input,
.tt-hint {
height: 30px;
padding: 8px 12px;
font-size: 14px;
line-height: 21px;
border: 2px solid #ccc;
border-radius: 8px;
outline: none;
}
.tt-input {
box-shadow: none;
}
.tt-hint {
color: #999;
}
.tt-dropdown-menu {
width: 422px;
margin-top: 12px;
padding: 8px 0;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.tt-suggestion {
padding: 3px 20px;
font-size: 14px;
line-height: 24px;
}
.tt-suggestion.tt-cursor {
color: #fff;
background-color: #0097cf;
}
.tt-suggestion p {
margin: 0;
}
.tt-suggestion em {
font-weight: bold;
font-style: normal;
}
.name {
font-weight: bold;
}
.attribute {
margin-left: 10px;
}
.swal2-styled.swal2-confirm {
background-color: #B30000 !important;
}
.swal2-container {
z-index: 1060;
}
.ais-SearchBox-input {
padding: 0.5rem 2.5rem !important;
}
.ais-SearchBox-input::placeholder {
color: rgb(185, 185, 185);
}
.ais-SearchBox-submitIcon {
left: 81%;
}
.ais-SearchBox-reset {
right: 1.3rem;
}
div.dt-container div.dt-length select {
padding: 0.5rem 1.9rem 0.5rem 1rem !important;
}
table.dataTable.table {
margin-bottom: 0.9rem;
margin-top: 0 !important;
}
div.dt-container div.dt-search input {
border: 1px solid 1px solid #b9b9b9 !important;
margin-left: 0;
}
.form-control-sm {
font-size: 0.895rem;
}
.btn-column-control {
background: white !important;
}
table.dataTable.table > tbody > tr.selected > * {
box-shadow: inset 0 0 0 9999px rgb(239 246 255);
color: rgb(83, 83, 83);
}
table.dataTable.table.table-hover > tbody > tr.selected:hover > * {
box-shadow: inset 0 0 0 9999px rgba(123, 126, 129, 0.98);
}
.table {
color: #1f2021 !important;
}
.table-hover tbody tr:hover {
color: #2f2f2f;
}
.modal-title-sm {
font-size: 1rem;
font-weight: 500;
padding-top: 4px;
}
.item-details-list {
background: #fff;
border: none;
border-right: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
}
/* Sidebar list row layout — name + outstanding on row 1, reference on row 2 */
.card-view .suppliers-datatable tbody tr {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: baseline;
padding: 0.5rem 0.75rem;
}
.card-view .suppliers-datatable tbody tr td {
border: none;
padding: 0;
}
.card-view .suppliers-datatable tbody tr td:first-child {
grid-column: 1;
grid-row: 1;
font-weight: 600;
font-size: 0.92rem;
color: #1e293b;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.card-view .suppliers-datatable tbody tr td:nth-child(2) {
grid-column: 1;
grid-row: 2;
font-size: 0.75rem;
color: #94a3b8;
padding-top: 2px;
}
.card-view .suppliers-datatable tbody tr td:nth-child(3) {
grid-column: 2;
grid-row: 1;
font-size: 0.82rem;
font-weight: 500;
color: #64748b;
text-align: right;
white-space: nowrap;
padding-left: 0.5rem;
}
.card-view .suppliers-datatable tbody tr td .colHeader { display: none; }
/* Selected row in sidebar list */
.card-view .card tbody tr.selected {
background-color: #f0f1ff !important;
border-left: 3px solid #151e2d;
}
.card-view .card tbody tr.selected > td:first-child {
color: #151e2d;
}
/* Sidebar list hover */
.card-view .card tbody tr:hover {
background-color: #f8f9fa !important;
}
.item-details-wrapper .item-details-content {
background: #f8f9fa;
}
.item-details-content {
}
.content-wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, .content-wrapper table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before {
background-color: rgba(255, 255, 255, 0);
border-radius: 0;
top: 10px;
left: 10px;
box-shadow: 0 0 0px #444;
}
.table td, .table th {
padding: 0.75rem;
}
.table thead th {
font-size: 0.68rem !important;
font-weight: 700;
color: #1e293b;
text-transform: uppercase;
letter-spacing: 0.06em;
border-bottom: 1px solid #e2e8f0;
}
/* Pill-style tabs for Customer & Supplier details */
.cd-tabs .nav-tabs {
border-bottom: none;
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.cd-tabs .nav-tabs .nav-item .nav-link {
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 0.4rem 1rem;
font-size: 0.85rem;
font-weight: 500;
color: #334155;
background: #fff;
transition: all 0.15s;
}
.cd-tabs .nav-tabs .nav-item .nav-link:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.cd-tabs .nav-tabs .nav-item .nav-link.active {
background: #1e293b;
color: #fff;
border-color: #1e293b;
}
@media (max-width: 768px) {
.vertical-overlay-menu .header-navbar .navbar-header .mobile-menu a.menu-toggle, .vertical-overlay-menu .header-navbar .navbar-header li.nav-item.d-md-none a.open-navbar-container {
padding-top: 0.8rem;
}
}
.item-details-wrapper {
position: relative;
padding: 0px;
}
body.vertical-layout.vertical-menu.menu-expanded
.item-details-wrapper {
padding: 0px;
}
.item-details-wrapper .item-details-list {
position: fixed;
width: calc(21% - 32px);
z-index: 2;
left: 64px;
background: #fff;
}
.card-view .dt-scroll-body {
overflow: hidden !important;
position: relative;
}
.item-details-wrapper .item-details-content {
position: absolute;
left: calc(21% - 32px);
right: 0;
z-index: 1;
}
.menu-collapsed .item-details-wrapper .item-details-content {
left: calc(21% - 32px);
right: 0;
}
body.vertical-layout.vertical-menu.menu-expanded .item-details-wrapper .item-details-list {
left: 210px;
width: calc(21% - 100px);
}
body.vertical-layout.vertical-menu.menu-expanded .item-details-wrapper .item-details-content {
left: calc(21% - 100px);
right: 0;
}
@media (max-width: 1280px) {
.item-details-wrapper .item-details-content {
left: calc(21% - 32px);
right: 0;
}
}
@media (max-width: 768px) {
.item-details-wrapper .item-details-content {
left: 0;
right: 0;
}
.content-header-right {
padding-bottom: 20px;
}
}
.header-navbar .navbar-container {
padding: 0px 18px 0 0px;
}
.height-170 {
height: 170px !important;
}
.tt-input, .tt-hint {
border: 1px solid #ccc;
border-radius: 0.25rem;
}
.ais-Hits-item, .ais-InfiniteHits-item, .ais-InfiniteResults-item, .ais-Results-item {
margin-top: 0;
margin-left: 1rem;
padding: 0.5rem 0.5rem;
width: 100%;
border: 0;
/*border: 1px dotted #ebeef2;*/
box-shadow: none;
}
.ais-Hits-item:hover {
background: #f4f5fa;
}
.ais-Pagination-link {
border: 0;
}
.ais-Pagination {
margin-top: 0rem;
padding: 1rem 0rem;
}
.ais-Pagination-list {
justify-content: left;
}
.ais-Pagination-item--selected .ais-Pagination-link {
color: #3b3838;
background-color: #dbd8d8;
border-color: #0096db;
}
.ais-Pagination-item--selected .ais-Pagination-link:hover {
color: #3b3838;
}
.hit-name a {
color: #3b3838;
}
.ais-Breadcrumb-link, .ais-HierarchicalMenu-link, .ais-Menu-link, .ais-Pagination-link, .ais-RatingMenu-link {
color: #313333;
}
.todo-application .todo-app-list-wrapper .todo-app-list .todo-task-list .todo-task-list-wrapper {
padding: 0;
margin-bottom: 5px;
border: 0;
}
.todo-application .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list .todo-task-list-wrapper .todo-item .badge {
background-color: #dbd8d8;
cursor: pointer;
color: white;
padding: 5px;
}
.project-dashboard-title {
font-weight: 400;
text-align: center;
font-size: 20px;
line-height: 28px;
}
.project-dashboard-value {
padding-top: 0;
font-size: 42px;
font-weight: 300;
text-align: center;
color: #5b5c5d;
line-height: 56px;
}
.breadcrumb-wrapper {
padding: 0 1.3rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #90cf93;
background-color: #90cf93;
}
.text-success {
color: #94bf1e !important;
}
.text-danger {
color: #b30000 !important;
}
.custom-control-label::after, .custom-control-label::before {
position: absolute;
top: 0.2rem;
left: -1.4rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
border-radius: 15px;
}
.custom-checkbox .custom-control-label::before {
border-radius: 0.55rem;
}
.custom-control-input:checked ~ .custom-control-label::before {
color: #fff;
border-color: #2196F3;
background-color: #2196F3;
}
.toast {
max-width: 450px;
}
.toast-container.toast-top-center > div, .toast-container.toast-bottom-center > div {
width: 450px;
}
@media all and (min-width: 481px) and (max-width: 768px) {
.toast-container > div {
width: 35em;
}
}
.bg-hexagons {
background-color: #f2f2f2;
}
.nav.nav-tabs.nav-underline {
border-bottom: 1px solid #e2e8f0;
}
.nav.nav-tabs.nav-underline .nav-item {
-webkit-flex: 1;
-moz-flex: 0;
-ms-flex: 0;
flex: 0;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active,
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active:focus,
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active:hover {
color: #1e293b !important;
font-weight: 700;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link {
color: #475569;
font-family: "Manrope", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
}
.dropdown-project-status {
padding: 4px;
font-size: 0.88rem;
color: white;
font-weight: 600;
text-decoration: none;
}
.shadow-sm {
box-shadow: rgb(237, 234, 233) 0px 0px 0px 1px, rgba(109, 110, 111, 0.08) 0px 1px 3px 0px !important;
}
.h-100 {
height: 99% !important;
}
.list-group-item {
margin-bottom: 0;
}
.trumbowyg-box, .trumbowyg-editor {
min-height: 201px;
margin-top: 3px;
}
form label {
color: rgb(30, 30, 30);
font-weight: 400;
}
.btn-link:hover {
color: #1565C0;
text-decoration: underline;
}
.custom-switch .custom-control-label::after {
left: calc(-2.25rem + 2px);
width: calc(1rem - 3px);
height: calc(1rem - 3px);
}
form .form-control {
border: 1px solid rgb(185, 185, 185);
color: rgb(30, 30, 30);
border-radius: 8px;
}
.badge-secondary {
background-color: rgb(245, 244, 243);
color: #363636;
font-weight: 600;
padding: 0.5rem;
}
.btn-secondary {
background-color: #fff !important;
color: rgb(30, 30, 30) !important;
border-color: rgb(148 163 184) !important;
}
.table thead th {
font-weight: 500;
}
.badge-default {
background-color: #e7e7e7;
color: #060606;
}
.border-top {
border-top: 1px solid #e5e5e5 !important;
}
.card-footer {
background: none;
}
.dine-in-order-card {
background: #fff0c0 !important;
}
.dine-in-order-card i {
font-size: 1.4rem;
}
.delivery-order-card {
background: #ffccba !important;
}
.delivery-order-card i {
font-size: 1.4rem;
}
.takeout-order-card {
background: #ffcae7 !important;
}
.takeout-order-card i {
font-size: 1.4rem;
}
.header-navbar .navbar-header {
height: 5rem;
}
@media (max-width: 991.98px) {
.header-navbar .navbar-header {
width: 100% !important;
}
.list-item-summary {
display: table-row;
}
.bar {
display: ruby-text;
}
.bar-step {
margin-bottom: 0.5rem;
}
html body .content .content-wrapper {
padding: 1rem 1.8rem;
}
.item-details-wrapper .item-details-content {
padding: 0;
}
#DocumentPrintPreview #conainerAssignTaskForm {
width: 670px;
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
.main-menu.menu-dark {
background: #212121;
}
.main-menu.menu-dark .navigation {
background: #212121;
}
.navbar-semi-dark .navbar-header {
background: #212121;
}
.main-menu.menu-dark .navigation > li.active > a {
background: #3f4041;
}
.main-menu.menu-dark .navigation > li > ul, .main-menu.menu-dark ul.menu-popout {
background: #212121;
padding-top: 8px;
padding-bottom: 8px;
}
.main-menu.menu-dark .navigation > li.active > a .main-menu.menu-dark .navigation > li ul li > a {
padding: 8px 20px 8px 54px;
}
.main-menu.menu-dark .navigation > li.active > a {
padding: 0.3rem 0.8rem;
}
.main-menu.menu-dark .navigation > li > a {
font-size: 1rem !important;
}
body.vertical-layout.vertical-menu .main-menu .navigation > li > a > i {
font-size: 1.35rem !important;
}
.header-navbar.navbar-shadow {
box-shadow: 0 2px 9px -1px rgba(0, 0, 0, 0.1);
}
.breadcrumb-item.active {
color: #545556;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link.active {
font-weight: 700;
}
.btn-outline-secondary {
border-color: #94A3B8;
}
.navbar-semi-dark .navbar-nav .disabled.nav-link, .navbar-semi-dark .navbar-nav .nav-link {
color: #525252;
}
.header-navbar .navbar-container ul.nav li a.nav-link-search:hover, .header-navbar .navbar-container ul.nav li a.nav-link-expand:hover, .header-navbar .navbar-container ul.nav li a.nav-link-label:hover {
color: #060606;
}
.main-menu.menu-dark .navigation > li.menu-collapsed-open > a, .main-menu.menu-dark .navigation > li.open > a {
border-right: 0 solid #4d4d4d;
}
@media (max-width: 767.98px) {
.menu-open .main-menu {
transform: translate3d(0, 0, 0);
top: 4.25rem !important;
padding-top: 18px;
}
}
/*.dropdown-toggle::after {
padding: 2px 3px 2px 6px;
}
*/
.dataTables_wrapper thead, .dataTables_wrapper thead th, .dataTables_wrapper.no-footer, .dataTables_wrapper.no-footer th, table.dataTable thead, table.dataTable thead th, table.dataTable.no-footer, table.dataTable.no-footer th {
background: #f8f9fa;
}
table.border {
border: 1px solid rgb(185, 185, 185) !important;
}
.table thead th {
vertical-align: bottom;
border-bottom: 1px solid rgb(246, 248, 249) !important;
border-top: 0;
}
.pagination .page-link {
color: #475569;
border-radius: 6px;
}
.page-item.active .page-link {
z-index: 1;
color: #fff;
background-color: #1e293b;
border-color: #1e293b;
}
.page-item.disabled .page-link {
border-color: #babfc7;
}
.dt-scroll-headInner {
/* background: #f9fafb; */
border-top: 0;
}
div.table-responsive > div.dt-container > div.row {
padding-top: 6px;
}
.dt-search {
margin-bottom: 0.9rem;
display: inline;
}
div.dt-buttons {
margin-left: 0.5rem;
margin-bottom: 0;
}
table.dataTable.table.table-hover > tbody > tr:hover > * {
box-shadow: none;
background-color: #f8fafc !important;
}
/* Global list view styles */
.dataTables_wrapper thead th,
div.dt-container thead th {
text-transform: uppercase;
font-size: 0.75rem !important;
font-weight: 600;
color: #64748b;
letter-spacing: 0.05em;
white-space: nowrap;
}
.dataTables_wrapper thead th span,
div.dt-container thead th span {
font-size: 0.75rem !important;
}
.btn-row-action {
width: 32px;
height: 32px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 6px;
color: #94a3b8;
border: none;
background: none;
transition: background 0.15s, color 0.15s;
}
.btn-row-action:hover {
background: #f1f5f9;
color: #475569;
}
.btn-row-action i {
font-size: 1rem;
}
/* Underline filter tabs (global) */
.items-filter-tabs {
display: flex;
list-style: none;
padding: 0;
margin: 0;
}
.items-filter-tabs .nav-item .nav-link {
padding: 0.6rem 1rem;
font-size: 0.9rem;
font-weight: 500;
color: #64748b;
border: none;
border-bottom: 2px solid transparent;
background: none;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
white-space: nowrap;
}
.items-filter-tabs .nav-item .nav-link:hover {
color: #3b82f6;
}
.items-filter-tabs .nav-item .nav-link.active {
color: #3b82f6;
font-weight: 600;
border-bottom: 2px solid #3b82f6;
}
.list-empty-state {
text-align: center;
padding: 3rem 1rem;
}
.list-empty-state i {
font-size: 2.5rem;
color: #cbd5e1;
display: block;
margin-bottom: 0.75rem;
}
.list-empty-state p {
color: #94a3b8;
font-size: 0.95rem;
margin: 0;
}
.dt-scroll-head {
/*padding-top: 15px;*/
}
div.dt-container div.dt-length label {
color: #747474;
padding-right: 8px;
}
.btn-col-control::after {
display: none !important;
}
.btn-more-menu {
/*padding: 0rem .2rem !important;*/
/* border: none !important; */
}
/*.btn-more-menu span {
font-size: 1.8rem !important
}
*/
.btn-more-menu::after {
display: none !important;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link {
font-size: 1.05rem;
}
.badge-success {
background-color: #a3df01;
color: #ffffff;
padding: 7px 12px;
font-size: 0.9rem;
border-radius: 15px;
}
.badge-info {
padding: 7px 12px;
font-size: 0.9rem;
border-radius: 15px;
}
.bg-success {
background-color: #b8e53e !important;
}
a.bg-success:focus, a.bg-success:hover, button.bg-success:focus, button.bg-success:hover {
background-color: #a0cf1f !important;
}
.text-warning {
color: #eb7122 !important;
}
.badge-warning {
background-color: #fcdeca;
color: #cf5606;
padding: 7px 12px;
font-size: 0.9rem;
border-radius: 15px;
}
.badge-default {
background-color: #e9e9e9;
color: #282828;
padding: 7px 12px;
font-size: 0.9rem;
border-radius: 15px;
}
.badge-danger {
background-color: #ffe3e7;
color: #b30000;
padding: 7px 12px;
font-size: 0.9rem;
border-radius: 15px;
}
.item-details-wrapper .nav.nav-tabs.nav-underline {
padding-left: 0;
border-bottom: none;
background: transparent
}
.details-content-header .content-header {
padding: 1rem 1rem 0 1rem !important
}
.details-content-header {
box-shadow: none;
}
.card-nav-header {
background: transparent !important;
}
.details-tab-content {
padding: 1.5rem;
padding-top: 0;
}
.details-tab-content {
max-height: calc(100vh - 132px) !important;
overflow-y: auto !important;
overflow-x: hidden;
padding-right: 20px;
}
.breadcrumb-new .content-header-title {
border-right: 0;
}
.main-menu.menu-dark .navigation > li.active > a {
background: #4CAF50;
font-weight: normal !important;
}
.main-menu.menu-dark .navigation > li .active > a {
color: #f6f6f6;
font-weight: normal !important;
background: #4CAF50;
margin: 0 1rem;
border-radius: 0.3rem;
padding-left: 40px;
padding: 6px 6px 6px 36px;
}
.main-menu.menu-dark .navigation > li.open > ul > li:hover.active > a {
padding: 6px 6px 6px 36px;
}
.main-menu.menu-dark .navigation > li ul li > a {
padding: 12px 20px 12px 50px;
}
@media (max-width: 767.98px) {
div.dt-buttons {
margin-left: 0;
margin-bottom: 0;
margin-top: 0.5rem;
}
.btn-col-control {
display: none;
}
.dt-paging {
display: block !important;
margin-bottom: 10px !important;
}
.dt-length {
display: block !important;
}
#searchbox {
width: 100% !important;
}
#navbar-mobile.navbar-collapse .navbar-nav {
margin-right: 0 !important;
}
.main-menu.menu-light .navigation {
padding-top: 0 !important;
}
.table {
margin-top: 0 !important;
}
/* div.table-responsive > div.dt-container > div.row {
display: none
} */
.header-navbar .navbar-header {
height: 4.2rem;
}
.header-navbar {
height: 4.2rem;
}
html body.fixed-navbar {
padding-top: 2.3rem;
}
.menu-open .main-menu {
top: 4.25rem !important;
}
.header-navbar .navbar-container ul.nav li a.dropdown-user-link {
padding: 1.4rem 0.5rem !important;
}
.header-navbar .navbar-container ul.nav li a.nav-link-label {
padding: 2.2rem 0.1rem 1.7rem 0.6rem;
}
.header-navbar.navbar-with-menu .navbar-container {
box-shadow: 0 2px 9px -1px rgba(0, 0, 0, 0.1);
}
.vertical-overlay-menu .main-menu .navigation > li.hover > a {
padding-left: 20px;
}
}
.main-menu.menu-dark .navigation > li {
padding: 1px 3px;
}
.btn-info, .color-info.info {
background-color: #1e293b !important;
}
.alert-info, .btn-info {
border-color: #1e293b !important;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu .navigation > li > a > span {
/* font-size: .962rem !important */
font-weight: 400;
}
.btn-info:active, .btn-info:focus {
border-color: #334155 !important;
background-color: #334155 !important;
color: #FFF !important;
}
.btn-info:hover {
border-color: #334155 !important;
background-color: #334155 !important;
color: #FFF !important;
}
.height-400 {
height: auto !important;
min-height: 400px;
}
.action-buttons {
visibility: hidden;
}
tr:hover .action-buttons {
visibility: visible;
}
.notification-item {
position: relative;
display: block;
padding: 1.25rem;
margin-bottom: -1px;
background-color: rgba(255, 255, 255, 0.3098039216);
border: 1px solid #f1eded;
border-left: 0;
border-right: 0;
}
.notification-item:focus, .notification-item:hover {
z-index: 1;
color: #4e5154;
background-color: #ffffff;
}
.avatar img {
border: none;
width: 30px;
}
.avatar img:hover {
border: none;
}
.ais-SearchBox-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0.5rem 1.7rem;
width: 100%;
position: relative;
background-color: #e7e8e9;
border: none;
border-radius: 12px;
font-size: 0.875rem;
color: #191c1d;
}
.ais-SearchBox-input::placeholder {
color: #6b7280;
}
.header-navbar .navbar-header .navbar-brand {
padding: 12px 10px !important;
display: flex;
align-items: center;
gap: 0.4rem;
}
body.vertical-layout.vertical-menu.menu-expanded .navbar .navbar-brand .brand-text {
/*color: $cherry-dark;*/
}
.order-summary:hover {
background: #f9fafb;
border-radius: 8px;
}
.btn-light {
font-weight: 400;
}
.btn-light, .color-info.light {
color: #4d4d4d !important;
background-color: #ffffff !important;
}
.btn-light:hover {
border-color: #ffffff !important;
background-color: #fffefe !important;
}
.btn-light:active, .btn-light:focus, .btn-light:hover {
color: #4d4d4d !important;
}
.modal {
border-radius: 8px;
}
.modal-open .modal {
border-radius: 8px;
}
.modal-close-floating {
position: absolute;
top: 1rem;
right: 1.5rem;
z-index: 10;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.9411764706);
}
.modal-content {
border-radius: 8px;
position: relative;
}
#itemOrderDetailsTable td {
border-top: none;
padding-bottom: .6rem;
padding-top: .6rem;
}
.payment-paid-status {
background-color: #a6ce38 !important;
color: #fff !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.order-type-delivery {
color: #A16207 !important
}
.order-type-dine-in {
color: #C2410C !important
}
.order-type-takeout {
color: #DB2777 !important;
}
.btn-light, .color-info.light {
border: 1px solid #ebeef2 !important;
}
.badge-count {
width: 22px;
height: 20px;
padding-top: 5px !important;
right: -1px;
border-radius: 40px;
}
.select2-container--bootstrap4 .select2-selection {
border: 1px solid rgb(203 213 225);
border-radius: 6px;
width: 100%;
}
.table {
border-radius: 8px;
}
body.vertical-layout.vertical-menu.menu-expanded .main-menu .navigation li.has-sub > a:not(.mm-next):after {
top: 9px !important;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu {
top: 5.5rem;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu .navigation > li.menu-collapsing-button {
position: fixed !important;
bottom: 39px;
left: -2px;
background: #f8f9fa;
text-align: right;
}
@media (min-width: 210px) {
body.vertical-layout.vertical-menu.menu-expanded .main-menu .navigation > li.menu-collapsing-button {
position: fixed !important;
bottom: 0;
left: 0;
background: #f8f9fa;
width: 221px;
text-align: right;
}
}
.has-icon-left .form-control {
padding-right: 1rem !important;
padding-left: calc(1.25em + 1.5rem + 2px) !important;
}
.custom-select {
color: #4e5154;
height: calc(1.875rem + 7px);
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
padding-right: 9px;
padding-left: 10px;
}
.page-item:first-child .page-link {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.page-item:last-child .page-link {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
div.dt-container div.dt-paging ul.pagination {
margin-right: 6px;
}
.dt-length {
display: inline-block;
}
.dt-paging {
display: inline-block;
}
.nav.nav-tabs.nav-underline .nav-item a.nav-link:before {
bottom: -2px;
}
.select2-container--classic .select2-selection--single, .select2-container--default .select2-selection--single {
border-radius: 6px;
border-color: rgb(229 231 235) !important;
}
.select2-container--classic .select2-selection--multiple, .select2-container--default .select2-selection--multiple {
border-color: rgb(229 231 235) !important;
outline: 0;
border-radius: 6px;
}
::placeholder {
color: rgb(185, 185, 185) !important;
}
a.app-org-change {
font-size: 1rem !important;
padding-top: 0.6rem !important;
padding-right: 0.3rem !important;
padding-left: 1rem !important;
padding-bottom: 1.8rem !important;
margin-top: 24px;
margin-right: 10px;
background: #DDDDDD;
height: 0 !important;
border-radius: 8px;
}
.content-body {
margin-left: 0;
}
body.vertical-layout.vertical-menu.menu-collapsed .main-menu {
width: 64px;
}
.avatar-online i {
background-color: #B8E53E;
}
.avatar i {
position: absolute;
right: 1px;
top: -17px;
width: 10px;
height: 10px;
border-radius: 100%;
border: 1px solid #fff;
z-index: 2;
}
.bg-danger {
background-color: #970606 !important;
}
.table.table-sm th, .table.table-sm td {
padding: .7rem .8rem;
}
.navbar-nav .mega-dropdown-menu {
width: calc(60% - 50px);
margin: 0px calc(21% - 9px);
border-radius: 8px;
}
.navbar-nav .mega-search-dropdown-menu {
width: calc(60% - 50px);
margin: 0px 2px;
top: 73px;
}
.ais-Hits-item {
line-height: 1.5 !important;
}
.navigation-main .mega-dropdown-menu ul li a, .navbar-nav .mega-dropdown-menu ul li a {
color: #545454 !important;
font-size: 1.1rem;
}
@media (max-width: 767px) {
.app-content {
margin: 10px 0px;
}
.header-navbar .navbar-header .navbar-brand {
padding: 17px 12px !important;
}
.ais-SearchBox-form {
width: 100% !important;
margin-top: 12px;
}
}
.btn-show-summary-report i,
.btn-more-menu i,
.btn-more-menu span,
.btn-show-filters i {
font-size: 1rem;
}
.btn-more-menu i.hgi-stroke {
margin-right: 0rem !important;
}
/*body {
line-height: 1.6;
padding: 20px;
}*/
/* Typography scale starting from 28px for h1 */
/*h1 {
font-size: 28px;
margin-bottom: 16px;
}
h2 {
font-size: 24px;
margin-bottom: 16px;
}
h3 {
font-size: 20px;
margin-bottom: 16px;
}
h4 {
font-size: 18px;
margin-bottom: 16px;
}
h5 {
font-size: 16px;
margin-bottom: 16px;
}
h6 {
font-size: 14px;
margin-bottom: 16px;
}
p {
font-size: 16px;
margin-bottom: 16px;
}
.small-text {
font-size: 14px;
}
.smaller-text {
font-size: 12px;
}*/
.btn-more-menu {
padding: 0 11px;
}
.dropdown .btn-more-menu {
}
.btn-more-menu i {
font-size: 1.5rem;
}
.btn-success {
border-color: #4CAF50 !important;
background-color: #4CAF50 !important;
color: #FFF !important;
}
.btn-success:hover {
border-color: #448f47 !important;
background-color: #448f47 !important;
color: #FFF !important;
}
.tt-input, .tt-hint {
height: 35px;
}
.dropdown-menu-org {
position: absolute !important;
left: auto !important;
right: -16px !important;
width: 293px !important;
margin: 0px calc(17% - 9px) !important;
}
.navbar .dropdown-menu-apps {
position: absolute !important;
left: auto !important;
right: 9px !important;
width: 340px !important;
}
.mega-dropdown-menu-shortcuts {
position: absolute !important;
left: auto !important;
right: 50px !important;
width: calc(50% - 50px);
margin: 0px calc(17% - 9px) !important;
}
@media (max-width: 767.98px) {
.dropdown-menu-org {
left: auto !important;
right: 0 !important;
width: calc(95% - 50px) !important;
margin: 0 auto !important;
}
.dropdown-menu-apps {
left: auto !important;
right: 0 !important;
width: calc(95% - 50px) !important;
margin: 0 auto !important;
}
.mega-dropdown-menu-shortcuts {
left: auto !important;
right: 0 !important;
width: calc(95% - 50px) !important;
margin: 0 auto !important;
}
}
.dropdown-notification .notification-tag {
top: 0;
right: 0;
}
.alert-light {
border-radius: 8px;
}
.fc-resourceTimelineDay-button, .fc-resourceTimelineWeek-button,
.fc-resourceTimelineMonth-button {
border: none !important;
}
.fc .fc-button-primary {
color: #323232 !important;
background-color: #ffffff !important;
border-color: #a9a9a9 !important;
text-transform: capitalize !important;
}
.fc-button-primary :hover {
color: #B71C1C;
}
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active {
color: #B71C1C !important;
text-decoration: underline;
text-decoration-color: #B71C1C !important;
}
.fc-prev-button,
.fc-next-button {
border-color: #a9a9a9 !important;
}
.history {
border-left: 2px solid #dee2e6;
padding: 20px 0;
}
.history .history-timeline-item {
position: relative;
padding-left: 45px;
padding-bottom: 20px;
}
.history .history-timeline-item::before {
content: "";
position: absolute;
left: -11px;
top: 0;
width: 20px;
height: 20px;
background: #ebeef2;
border: 4px solid #fff;
border-radius: 50%;
}
.history .history-timeline-date {
color: #6c757d;
font-size: 0.875rem;
}
.history .history-timeline-title {
font-weight: 500;
margin-bottom: 5px;
font-size: 1.1rem;
color: inherit;
}
.modal-dark .history .history-timeline-title {
color: #e9e9e9;
}
.modal-dark .history .history-timeline-date {
color: #a0a4a8;
}
.modal-dark .history .timeline-content p {
color: #a0a4a8;
}
.history .history-timeline-content {
color: #6c757d;
font-size: 0.875rem;
}
.history .history-see-details {
/* color: #007bff;*/
text-decoration: none;
font-size: 0.875rem;
float: right;
}
.history .history-see-details:hover {
text-decoration: underline;
}
.toast-container {
width: 400px !important;
}
#toast-container > div {
width: 400px !important;
box-shadow: 0 0 9px #a4a4a5 !important;
}
.toast-info {
background-color: #2196F3;
color: white;
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
color: #fff !important;
}
.custom-radio .custom-control-label::before {
width: 1.1rem;
height: 1.01rem;
}
/* Horizontal subscribe ribbon styling */
.subscribe-ribbon {
width: 100%;
background-color: #1e293b;
color: white;
text-align: center;
padding: 15px 0;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
transition: background-color 0.3s ease;
/*position: absolute;*/
top: 0;
left: 0;
z-index: 1041;
height: 40px;
}
.subscribe-ribbon:hover {
background-color: #950404;
cursor: pointer;
}
.header-navbar {
min-height: 4.2rem;
}
.progress-tracker .step {
display: flex;
align-items: flex-start;
padding: 15px 0;
position: relative;
}
.progress-tracker .step:not(:last-child):after {
content: "";
position: absolute;
top: 35px;
left: 20px;
height: calc(100% - 20px);
width: 1px;
background-color: #e0e0e0;
}
.progress-tracker .step-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
color: #999;
flex-shrink: 0;
z-index: 3;
}
.progress-tracker .step.completed .step-icon {
background-color: rgba(32, 41, 131, 0.15);
color: #1e293b;
}
.progress-tracker .step.active .step-icon {
background-color: #E8F5E9;
color: #43A047;
}
.progress-tracker .step-label {
flex: 1;
}
.progress-tracker .step-title {
font-weight: 500;
margin-bottom: 5px;
font-size: 15px;
}
.progress-tracker .step-details {
color: #666;
font-size: 0.95rem;
margin-bottom: 12px;
}
.progress-tracker .step-actions {
display: flex;
gap: 10px;
margin-top: 10px;
}
.ais-SearchBox-resetIcon path, .ais-SearchBox-submitIcon path {
fill: #2d2d2d;
}
@media (max-width: 768px) {
.chart-container {
overflow-x: visible;
}
.details-tab-content {
max-height: none;
}
}
.toast-container {
width: 400px !important;
}
#toast-container > div {
width: 400px !important;
box-shadow: 0 0 9px #a4a4a5 !important;
}
.toast-info {
background-color: #2196F3;
color: white;
}
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active {
color: #fff !important;
}
@media (max-width: 767.98px) {
.header-navbar .navbar-header .navbar-brand {
position: absolute;
left: 54%;
top: 0px;
transform: translate(-50%, 0);
}
.header-navbar .navbar-header .navbar-brand .brand-text img {
width: 70px;
}
.header-navbar.navbar-with-menu .navbar-container {
padding: 0 !important;
}
#navbar-mobile {
padding: 0.5rem 1.5rem;
}
}
a.dotted-link {
text-decoration: none;
}
.custom-radio .custom-control-label::before {
width: 1.1rem;
height: 1.01rem;
}
/* Horizontal subscribe ribbon styling */
.subscribe-ribbon {
width: 100%;
background-color: #1e293b;
color: white;
text-align: center;
transition: background-color 0.3s ease;
top: 0;
left: 0;
z-index: 1041;
height: 40px;
padding-top: 14px;
}
.subscribe-ribbon:hover {
background-color: #950404;
cursor: pointer;
}
.header-navbar {
min-height: 4.2rem;
}
.progress-nav {
margin: 0;
padding: 0;
}
.progress-nav .nav-item {
flex: 1;
text-align: center;
position: relative;
padding: 10px 23px;
}
.progress-nav .nav-item:last-child {
border-right: none;
}
.progress-nav .nav-item:first-child {
padding-left: 0;
}
.progress-nav .nav-link {
font-weight: normal;
white-space: nowrap;
transition: all 0.3s ease;
text-decoration: none;
font-size: 0.85rem;
color: rgb(185, 185, 185);
}
.progress-nav .nav-link.active {
color: #ce000f;
font-weight: bold;
}
.progress-nav .nav-link:hover {
color: #2c75b8;
text-decoration: none;
}
.progress-nav .nav-chevron {
position: absolute;
right: 0;
top: 57%;
transform: translateY(-57%);
color: #999;
font-size: 1.2rem;
opacity: 0.7;
}
/* Horizontal dotted line between items */
.progress-nav::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background-color: #e6e6e6;
}
/* Responsive adjustments */
@media (max-width: 992px) {
.progress-nav .nav-link {
font-size: 0.85rem;
}
}
@media (max-width: 768px) {
.progress-nav .nav-link {
font-size: 0.8rem;
}
.progress-nav .nav-chevron {
right: -5px;
}
}
@media (max-width: 576px) {
.progress-nav {
flex-direction: column;
}
.progress-nav .nav-item {
text-align: left;
border-right: none;
padding-left: 15px;
}
.progress-nav .nav-item:last-child {
border-bottom: none;
}
}
a.app-org-trial {
font-size: 1rem !important;
padding-top: 0.6rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
padding-bottom: 1.6rem !important;
margin-top: 24px;
margin-right: 10px;
background: none;
height: 0 !important;
border-radius: 8px;
border: 1px solid #d00d1b;
color: #d00d1b !important;
}
@media (min-width: 768px) {
.drag-target {
z-index: 1036;
/*background: #f8f9fa;*/
}
}
.invoice-status-draft {
background-color: #eaeaea !important;
color: #4F4F4F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-pending-approval {
background-color: #FFF4D6 !important;
color: #8C6B1F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-approved {
background-color: #D6E8FF !important;
color: #1F4E8C !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-partially-paid {
background-color: #FDE9D4 !important;
color: #c62828 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-fully-paid {
background-color: #D4F5D0 !important;
color: #237144 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-void {
background-color: #FFE0E0 !important;
color: #8C1F1F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-deleted {
background-color: #e3f2fd !important;
color: #1976d2 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-on-hold {
background-color: #e0f7fa !important;
color: #0097a7 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.invoice-status-draft-text {
color: #4F4F4F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-pending-approval-text {
color: #8C6B1F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-approved-text {
color: #1F4E8C !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-partially-paid-text {
color: #c62828 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-fully-paid-text {
color: #237144 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-void-text {
color: #8C1F1F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-deleted-text {
color: #1976d2 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-on-hold-text {
color: #0097a7 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-draft {
background-color: #eaeaea !important;
color: #4F4F4F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-sent-to-customer {
background-color: #E0F2F1 !important;
color: #00695C !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-pending-approval {
background-color: #FFF4D6 !important;
color: #8C6B1F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-approved {
background-color: #D6E8FF !important;
color: #1F4E8C !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-declined {
background-color: #FDE9D4 !important;
color: #c62828 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-accepted {
background-color: #D4F5D0 !important;
color: #237144 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-expired {
background-color: #FFE0E0 !important;
color: #8C1F1F !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-revised {
background-color: #cbfaff !important;
color: #0097a7 !important;
padding: 7px 12px;
font-size: 0.9rem !important;
border-radius: 15px;
font-weight: 500;
}
.quote-status-draft-text {
color: #4F4F4F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-sent-to-customer-text, .quote-status-pending-approval-text {
color: #8C6B1F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-approved-text {
color: #1F4E8C !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-declined-text {
color: #c62828 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-accepted-text {
color: #237144 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-expired-text {
color: #8C1F1F !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.invoice-status-deleted-text {
color: #1976d2 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.quote-status-revised-text {
color: #0097a7 !important;
font-size: 0.9rem !important;
font-weight: 500;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #1f1b1b;
background-color: #dddddd;
}
/* ===== No Top-Nav Mode (Counter page) ===== */
/* Hide top navbar entirely */
body.no-topnav nav.header-navbar {
display: none !important;
}
/* Hide floating menu button */
body.no-topnav .floating-menu-button {
display: none !important;
}
/* Remove body padding-top that was for fixed navbar */
body.no-topnav.fixed-navbar,
body.no-topnav {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Sidebar starts from top of viewport */
body.no-topnav .main-menu {
top: 0 !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
}
/* Always show sidebar logo when top nav is hidden */
body.no-topnav .main-menu .sidebar-logo {
display: block !important;
}
/* Hide sidebar collapse toggle in no-topnav mode */
body.no-topnav .menu-collapsing-button {
display: none !important;
}
/* Content area adjustments */
body.no-topnav .app-content {
margin: 0 0px 0 60px !important;
top: 0 !important;
border-radius: 0;
min-height: 100vh;
border: 0;
}
/* Sidebar menu content height fills viewport */
body.no-topnav .main-menu.menu-fixed .main-menu-content {
/* height: calc(100vh - 4rem) !important;
max-height: calc(100vh - 4rem) !important;*/
}
/* ===== No Top-Nav Mobile: Show navbar & overlay sidebar ===== */
/* Tablets & phones (< 992px): show the top navbar */
@media (max-width: 991.98px) {
body.no-topnav nav.header-navbar {
display: flex !important;
height: 4.2rem;
}
body.no-topnav.fixed-navbar,
body.no-topnav {
padding-top: 4.2rem !important;
}
/* Sidebar starts below navbar on tablets */
body.no-topnav .main-menu {
top: 4.2rem !important;
height: calc(100% - 4.2rem) !important;
}
/* Hide sidebar logo & brand row (already shown in top navbar) */
body.no-topnav .main-menu .sidebar-logo,
body.no-topnav .main-menu > .nav.navbar-nav {
display: none !important;
}
/* Hide bottom bar & collapse toggle on mobile */
body.no-topnav .sidebar-bottom-bar {
display: none !important;
}
body.no-topnav .sidebar-collapse-toggle {
display: none !important;
}
/* Content area: offset by collapsed sidebar width */
body.no-topnav .app-content {
margin: 0 0 0 60px !important;
border-radius: 0;
}
}
/* Phones (< 768px): sidebar becomes overlay.
The framework switches body to vertical-overlay-menu on sm/xs,
which hides the sidebar off-screen. We override no-topnav rules
to let the overlay behavior work with menu-open toggling. */
@media (max-width: 767.98px) {
body.no-topnav nav.header-navbar {
height: 3.5rem;
}
body.no-topnav.fixed-navbar,
body.no-topnav {
padding-top: 3.5rem !important;
}
body.no-topnav .main-menu {
top: 3.5rem !important;
height: calc(100% - 3.5rem) !important;
left: -280px !important;
transform: translate3d(0, 0, 0) !important;
transition: width 0.25s, opacity 0.25s, transform 0.25s;
opacity: 0;
z-index: 1051;
width: 280px !important;
}
/* Slide sidebar in when menu-open */
body.no-topnav.menu-open .main-menu {
transform: translate3d(280px, 0, 0) !important;
opacity: 1;
}
/* Show overlay backdrop */
body.no-topnav.menu-open .sidenav-overlay {
display: block;
opacity: 1;
visibility: visible;
}
/* Content area: full width when sidebar is overlay */
body.no-topnav .app-content {
margin-left: 0 !important;
}
}
/* ===== Sidebar Bottom Bar (No Top-Nav Mode) ===== */
.sidebar-bottom-bar {
display: none;
}
body.no-topnav .sidebar-bottom-bar {
display: flex;
flex-direction: column;
align-items: center;
position: static;
width: 64px;
border-top: 1px solid #f1f5f9;
padding: 6px 0;
z-index: 1050;
transition: width 0.3s ease;
flex-shrink: 0;
}
body.no-topnav.menu-expanded .sidebar-bottom-bar,
body.no-topnav .main-menu.expanded .sidebar-bottom-bar {
width: 204px;
padding: 10px 14px 8px;
align-items: stretch;
}
/* Make sidebar a flex column: nav scrolls, bottom bar stays pinned */
body.no-topnav .main-menu .main-menu-content {
display: flex !important;
flex-direction: column !important;
flex: 1 !important;
min-height: 0 !important;
overflow: visible !important;
}
body.no-topnav .navigation-main {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.sidebar-bottom-item {
width: 100%;
position: relative;
}
/* Utilities wrapper: vertical in collapsed, horizontal in expanded */
.sidebar-bottom-utilities {
display: flex;
flex-direction: column;
width: 100%;
}
.sidebar-bottom-link {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 8px;
text-decoration: none !important;
transition: background 0.15s, color 0.15s;
cursor: pointer;
color: #64748b;
border-radius: 8px;
position: relative;
}
.sidebar-bottom-link:hover {
background: #f1f5f9;
color: #0f172a;
}
.sidebar-bottom-link i {
font-size: 1.2rem;
line-height: 1;
}
/* Sidebar notification badge */
.sidebar-notif-badge {
position: absolute;
top: 2px;
right: 2px;
min-width: 16px;
height: 16px;
padding: 0 4px;
font-size: 0.65rem;
font-weight: 600;
color: #fff;
background: #ef4444;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
body.no-topnav.menu-expanded .sidebar-notif-badge,
body.no-topnav .main-menu.expanded .sidebar-notif-badge {
position: relative;
top: auto;
right: auto;
margin-left: auto;
}
/* Failed Orders Alert in Sidebar */
.sidebar-failed-orders-alert {
display: flex;
align-items: center;
padding: 10px 15px;
background: #fef2f2;
border-bottom: 1px solid #fecaca;
color: #dc2626;
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
gap: 8px;
}
.sidebar-failed-orders-alert:hover {
background: #fee2e2;
color: #dc2626;
text-decoration: none;
}
.sidebar-failed-orders-alert i {
font-size: 1rem;
}
.sidebar-failed-orders-alert .badge {
font-size: 0.75rem;
}
/* Menu badge for counts (e.g., Failed Orders) */
.menu-badge {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: #dc2626;
margin-left: 4px;
}
.menu-badge.has-count {
color: #dc2626;
font-weight: 700;
}
/* Expanded state: left-align links with padding */
body.no-topnav.menu-expanded .sidebar-bottom-link,
body.no-topnav .main-menu.expanded .sidebar-bottom-link {
justify-content: flex-start;
padding: 8px 10px;
}
.sidebar-bottom-org-badge {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 8px;
flex-shrink: 0;
}
.sidebar-bottom-org-badge i {
font-size: 1.1rem;
}
.sidebar-bottom-text {
display: none;
margin-left: 10px;
white-space: nowrap;
font-size: 0.85rem;
color: #64748b;
overflow: hidden;
text-overflow: ellipsis;
}
body.no-topnav.menu-expanded .sidebar-bottom-text,
body.no-topnav .main-menu.expanded .sidebar-bottom-text {
display: inline;
}
body.no-topnav.menu-expanded .sidebar-bottom-link:hover .sidebar-bottom-text,
body.no-topnav .main-menu.expanded .sidebar-bottom-link:hover .sidebar-bottom-text {
color: #0f172a;
}
.sidebar-bottom-avatar {
width: 32px !important;
height: 32px !important;
}
.sidebar-bottom-avatar img {
width: 32px !important;
height: 32px !important;
border-radius: 50%;
}
.sidebar-bottom-dropdown {
min-width: 220px;
max-height: 400px;
overflow-y: auto;
}
/* ===== Collapsed sidebar flyout popout redesign ===== */
/* Popout header (category title) */
.main-menu .main-menu-content > span.menu-title,
.main-menu .main-menu-content > a.menu-title {
background: #fff !important;
color: #0f172a !important;
text-transform: none !important;
font-weight: 600 !important;
font-size: 0.85rem !important;
padding: 0.75rem 1rem !important;
border: 1px solid #e2e8f0 !important;
border-bottom: 1.5px solid #e2e8f0 !important;
letter-spacing: 0 !important;
width: 220px !important;
border-radius: 10px 10px 0 0 !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04) !important;
text-decoration: none !important;
z-index: 1051 !important;
}
.main-menu .main-menu-content > a.menu-title:hover {
color: #0f172a !important;
text-decoration: none !important;
}
/* Popout submenu container */
.main-menu .main-menu-content > ul.menu-content.menu-popout {
background: #fff !important;
width: 220px !important;
border-radius: 0 0 10px 10px !important;
box-shadow: 0 8px 30px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.04) !important;
border: 1px solid #e2e8f0 !important;
border-top: none !important;
padding: 0.4rem 0 0.5rem !important;
overflow-y: auto;
z-index: 1051 !important;
}
/* Popout submenu items */
.main-menu .main-menu-content > ul.menu-content.menu-popout li {
white-space: nowrap;
padding: 0 0.4rem;
}
.main-menu .main-menu-content > ul.menu-content.menu-popout li > a {
display: flex !important;
align-items: center !important;
padding: 0.48rem 0.7rem !important;
font-size: 0.82rem !important;
color: #334155 !important;
font-weight: 450 !important;
transition: all 0.15s ease !important;
border-radius: 6px !important;
text-decoration: none !important;
margin: 1px 0 !important;
}
.main-menu .main-menu-content > ul.menu-content.menu-popout li > a:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
/* Active item in popout */
.main-menu .main-menu-content > ul.menu-content.menu-popout li.active > a {
color: #1e293b !important;
background: #eff1ff !important;
font-weight: 550 !important;
}
.main-menu .main-menu-content > ul.menu-content.menu-popout li.active > a:hover {
background: #e0e3ff !important;
}
/* When there's no submenu, style the single title link as a compact tooltip label */
.main-menu .main-menu-content > a.menu-title:only-child {
border-radius: 8px !important;
border: 1px solid #e2e8f0 !important;
padding: 0.45rem 0.85rem !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
width: auto !important;
min-width: 0 !important;
white-space: nowrap !important;
color: #334155 !important;
background: #fff !important;
}
.main-menu .main-menu-content > a.menu-title:only-child:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
}
/* Hide the popout when sidebar is expanded — only show in collapsed mode */
body.menu-expanded .main-menu .main-menu-content > span.menu-title,
body.menu-expanded .main-menu .main-menu-content > a.menu-title,
body.menu-expanded .main-menu .main-menu-content > ul.menu-content.menu-popout {
display: none !important;
}
/* Org switcher: full-height panel next to sidebar */
body.no-topnav .sidebar-bottom-org-item .dropdown-menu-org {
position: fixed !important;
top: 0 !important;
left: 64px !important;
bottom: 0 !important;
right: auto !important;
width: 280px !important;
max-height: 100vh !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
border: none;
border-right: 1.5px solid #e2e8f0;
box-shadow: 4px 0 20px rgba(0,0,0,0.08);
z-index: 1050;
overflow-y: auto;
padding-top: 0;
background: #fff;
transform: none !important;
display: flex !important;
flex-direction: column;
}
body.no-topnav .sidebar-bottom-org-item .dropdown-menu-org:not(.show) {
display: none !important;
}
/* Panel header */
.org-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.9rem 1rem;
border-bottom: 1.5px solid #e2e8f0;
flex-shrink: 0;
}
.org-panel-title {
font-size: 0.95rem;
font-weight: 600;
color: #0f172a;
}
.org-panel-close {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: #f1f5f9;
border-radius: 6px;
cursor: pointer;
color: #64748b;
transition: background 0.15s;
}
.org-panel-close:hover {
background: #e2e8f0;
color: #0f172a;
}
.org-panel-close i {
font-size: 0.9rem;
}
body.no-topnav .sidebar-bottom-org-item .dropdown-menu-org .list-group {
max-height: none !important;
overflow-y: auto;
flex: 1;
}
/* Panel position when sidebar is expanded */
body.no-topnav.menu-expanded .sidebar-bottom-org-item .dropdown-menu-org,
body.no-topnav .main-menu.expanded .sidebar-bottom-org-item .dropdown-menu-org {
left: 210px !important
}
/* Org switcher: manage link */
.org-manage-link {
padding: 0.55rem 1rem;
border-bottom: 1px solid #f1f5f9;
}
.org-manage-link a {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.82rem;
font-weight: 500;
color: #475569;
text-decoration: none;
transition: color 0.15s;
}
.org-manage-link a:hover {
color: #0f172a;
}
.org-manage-link a i {
font-size: 0.9rem;
}
/* Org switcher: search */
.org-search-container {
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #f1f5f9;
flex-shrink: 0;
}
.org-search-wrapper {
position: relative;
display: flex;
align-items: center;
}
.org-search-icon {
position: absolute;
left: 0.6rem;
font-size: 0.8rem;
color: #94a3b8;
pointer-events: none;
}
.org-search-input {
width: 100%;
padding: 0.4rem 0.6rem 0.4rem 2rem;
font-size: 0.82rem;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
color: #0f172a;
outline: none;
transition: border-color 0.15s, background 0.15s;
}
.org-search-input::placeholder {
color: #94a3b8;
}
.org-search-input:focus {
border-color: #cbd5e1;
background: #fff;
}
/* Org switcher: list */
.org-search-list {
overflow-y: auto;
max-height: 400px;
}
/* Org switcher: item */
.org-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.55rem 0.85rem;
color: #334155;
text-decoration: none;
border: none;
border-bottom: 1px solid #f8fafc;
background: transparent;
transition: background 0.15s;
cursor: pointer;
}
.org-item:hover {
background: #f1f5f9;
color: #0f172a;
text-decoration: none;
}
.org-item-active {
background: #eff1ff;
border-left: 3px solid #1e293b;
}
.org-item-active:hover {
background: #e0e3ff;
}
/* Org item icon */
.org-item-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 8px;
background: #f1f5f9;
flex-shrink: 0;
}
.org-item-icon i {
font-size: 1.1rem;
color: #64748b;
}
.org-item-icon-active {
background: #e0e3ff;
}
.org-item-icon-active i {
color: #1e293b;
}
.org-item:hover .org-item-icon {
background: #e2e8f0;
}
.org-item-active:hover .org-item-icon {
background: #d0d4ff;
}
/* Org item body */
.org-item-body {
display: flex;
flex-direction: column;
min-width: 0;
flex: 1;
}
.org-item-name {
font-size: 0.84rem;
font-weight: 550;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
}
/* .org-item-active .org-item-name {
color: #1e293b;
}
*/
.org-item-meta {
font-size: 0.72rem;
color: #94a3b8;
line-height: 1.3;
}
.org-item-dot {
padding: 0 1px;
}
/* Org item check */
.org-item-check {
font-size: 1rem;
color: #1e293b;
flex-shrink: 0;
margin-left: auto;
}
/* Sidebar apps & notifications: full-height panel next to sidebar */
body.no-topnav .sidebar-panel-dropdown {
position: fixed !important;
top: 0 !important;
left: 64px !important;
bottom: 0 !important;
right: 0 !important;
width: calc(100vw - 64px) !important;
max-height: 100vh !important;
height: 100vh !important;
margin: 0 !important;
border-radius: 0 !important;
border: none;
border-right: 1.5px solid #e2e8f0;
box-shadow: 4px 0 20px rgba(0,0,0,0.08);
z-index: 1050;
overflow-y: hidden;
padding-top: 0;
background: #fff;
transform: none !important;
display: flex !important;
flex-direction: column;
}
body.no-topnav .sidebar-panel-dropdown:not(.show) {
display: none !important;
}
body.no-topnav .sidebar-panel-dropdown .sidebar-panel-content {
flex: 1;
overflow-y: auto;
padding: 0;
}
/* Panel position when sidebar is expanded */
body.no-topnav.menu-expanded .sidebar-panel-dropdown,
body.no-topnav .main-menu.expanded .sidebar-panel-dropdown {
left: 210px !important;
width: calc(100vw - 210px) !important;
}
/* ---- Profile panel dropdown ---- */
.dropdown-menu-profile {
min-width: 240px !important;
padding: 0 !important;
border-radius: 12px !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
overflow: hidden;
}
.profile-panel-header {
display: flex;
align-items: center;
gap: 12px;
padding: 1rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.profile-panel-avatar {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.profile-panel-avatar img {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
}
.profile-panel-info {
overflow: hidden;
}
.profile-panel-name {
font-size: 0.88rem;
font-weight: 600;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-panel-email {
font-size: 0.75rem;
color: #64748b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.profile-panel-org {
display: flex;
align-items: center;
gap: 8px;
padding: 0.6rem 1rem;
font-size: 0.78rem;
color: #64748b;
border-bottom: 1px solid #f1f5f9;
}
.profile-panel-org i {
font-size: 0.95rem;
flex-shrink: 0;
}
.profile-panel-menu {
padding: 0.4rem 0;
}
.profile-panel-item {
display: flex;
align-items: center;
gap: 10px;
padding: 0.55rem 1rem;
font-size: 0.84rem;
color: #334155;
text-decoration: none !important;
transition: background 0.15s;
}
.profile-panel-item:hover {
background: #f1f5f9;
color: #0f172a;
}
.profile-panel-item i {
font-size: 1.05rem;
color: #64748b;
width: 20px;
text-align: center;
}
.profile-panel-footer {
padding: 0.4rem 0;
border-top: 1px solid #e2e8f0;
}
.profile-panel-logout {
display: flex;
align-items: center;
gap: 10px;
padding: 0.55rem 1rem;
font-size: 0.84rem;
color: #dc2626;
text-decoration: none !important;
transition: background 0.15s;
cursor: pointer;
}
.profile-panel-logout:hover {
background: #fef2f2;
color: #dc2626;
}
.profile-panel-logout i {
font-size: 1.05rem;
width: 20px;
text-align: center;
}
/* ---- Apps compact dropdown ---- */
.dropdown-menu-apps {
min-width: 220px !important;
max-width: 260px !important;
padding: 0 !important;
border-radius: 12px !important;
border: 1.5px solid #e2e8f0 !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
overflow: hidden;
}
/* Sidebar apps dropup: use normal dropup positioning like Profile */
.sidebar-bottom-apps-item .dropdown-menu-apps {
left: 0 !important;
right: auto !important;
width: 220px !important;
}
.apps-panel-header {
padding: 0.7rem 1rem;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.apps-panel-title {
font-size: 0.8rem;
font-weight: 600;
color: #334155;
}
.apps-panel-content {
max-height: 280px;
overflow-y: auto;
padding: 6px;
}
/* Compact app items inside the sidebar dropup */
.apps-panel-content .select-app {
padding: 0;
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
border: none;
background: transparent;
}
.apps-panel-content .select-app a.app-switch {
display: flex;
align-items: center;
padding: 8px 12px;
border-radius: 8px;
text-decoration: none;
transition: background 0.15s;
}
.apps-panel-content .select-app a.app-switch:hover {
background: #f1f5f9;
}
.apps-panel-content .select-app .media {
display: flex;
align-items: center;
}
.apps-panel-content .select-app .media-icon {
width: 32px;
height: 32px;
display: flex !important;
align-items: center;
justify-content: center;
background: #f1f5f9;
border-radius: 8px;
margin-right: 10px !important;
flex-shrink: 0;
}
.apps-panel-content .select-app .media-icon i {
font-size: 16px !important;
color: #475569;
}
.apps-panel-content .select-app h5 {
font-size: 0.82rem !important;
font-weight: 500 !important;
padding-bottom: 0 !important;
margin: 0 !important;
color: #1e293b;
}
.apps-panel-content .select-app .media-body span {
display: none;
}
.apps-panel-content .select-app a.app-switch:hover .media-icon {
background: #e2e8f0;
}
.apps-panel-content .select-app a.app-switch:hover .media-icon i {
color: #1e293b;
}
.sidebar-collapse-toggle {
margin-top: 2px;
padding-top: 2px;
}
/* ---- Expanded: Org item ---- */
body.no-topnav.menu-expanded .sidebar-bottom-org-item .sidebar-bottom-link,
body.no-topnav .main-menu.expanded .sidebar-bottom-org-item .sidebar-bottom-link {
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 7px 10px;
margin-bottom: 8px;
}
body.no-topnav.menu-expanded .sidebar-bottom-org-item .sidebar-bottom-link:hover,
body.no-topnav .main-menu.expanded .sidebar-bottom-org-item .sidebar-bottom-link:hover {
background: #eef2f7;
border-color: #cbd5e1;
}
body.no-topnav.menu-expanded .sidebar-bottom-org-item .sidebar-bottom-text,
body.no-topnav .main-menu.expanded .sidebar-bottom-org-item .sidebar-bottom-text {
font-weight: 600;
color: #0f172a;
font-size: 0.82rem;
max-width: 155px;
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
/* ---- Expanded: Utility row (Apps, Notifications, Profile) ---- */
body.no-topnav.menu-expanded .sidebar-bottom-utilities,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities {
display: flex;
flex-direction: row;
gap: 4px;
margin-bottom: 0;
background: #f8fafc;
border-radius: 10px;
padding: 4px;
border: 1.5px solid #e2e8f0;
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-item,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-item {
flex: 1;
margin: 0;
padding: 0;
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-link,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-link {
justify-content: center;
flex-direction: column;
align-items: center;
gap: 3px;
padding: 8px 4px 6px;
border-radius: 8px;
background: transparent;
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-link:hover,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-link:hover {
background: #fff;
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-link i,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-link i {
font-size: 1.1rem;
display: flex;
align-items: center;
justify-content: center;
height: 22px;
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-text,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-text {
font-size: 0.68rem;
font-weight: 500;
margin-left: 0;
text-align: center;
color: #64748b;
}
/* Scale down the avatar inside utility row */
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-avatar,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-avatar {
width: 22px !important;
height: 22px !important;
}
body.no-topnav.menu-expanded .sidebar-bottom-utilities .sidebar-bottom-avatar img,
body.no-topnav .main-menu.expanded .sidebar-bottom-utilities .sidebar-bottom-avatar img {
width: 22px !important;
height: 22px !important;
}
/* ---- Collapsed: Hide apps button ---- */
body.no-topnav .sidebar-bottom-apps-item {
display: none;
}
body.no-topnav.menu-expanded .sidebar-bottom-apps-item,
body.no-topnav .main-menu.expanded .sidebar-bottom-apps-item {
display: flex;
}
/* ---- Expanded: Collapse toggle ---- */
body.no-topnav.menu-expanded .sidebar-collapse-toggle .sidebar-bottom-link,
body.no-topnav .main-menu.expanded .sidebar-collapse-toggle .sidebar-bottom-link {
justify-content: center;
padding: 6px;
color: #94a3b8;
}
/* ===== Counter Page Header (3-column) ===== */
.counter-page-header {
display: flex;
flex-direction: column;
margin-bottom: 0px;
}
.counter-page-header__row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.4rem 1.6rem 0.6rem;
gap: 2.5rem;
flex-wrap: nowrap;
}
.counter-page-header__filters {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* Filter pills */
.counter-status-filters {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: nowrap;
}
.counter-filter-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.55rem 1.2rem;
border-radius: 20px;
border: 1px solid #ddd;
background: #fff;
color: #334155;
font-size: 14px;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
transition: all 0.15s ease;
line-height: 1.4;
}
.counter-filter-pill:hover {
background: #f5f5f5;
}
.counter-filter-pill.active {
background: #d5dde8;
border-color: #bbb;
font-weight: 600;
}
.counter-filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
border-radius: 11px;
font-size: 12px;
font-weight: 600;
background: #334155;
color: #F1F5F9;
line-height: 1;
}
/* Color-coded filter variants */
.counter-filter--pending {
color: #EA580C;
border-color: #fdd8b5;
background: #fdd8b5;
}
.counter-filter--pending .counter-filter-badge {
background: #EA580C;
color: #fff;
}
.counter-filter--ready {
color: #1565c0;
border-color: #eef5ff;
background: #eef5ff;
}
.counter-filter--ready .counter-filter-badge {
background: #1565c0;
color: #fff;
}
.counter-filter--enroute {
color: #7C3AED;
border-color: #EDE9FE;
background: #EDE9FE;
}
.counter-filter--enroute .counter-filter-badge {
background: #7C3AED;
color: #EDE9FE;
}
.counter-filter--served {
color: #16A34A;
border-color: #DCFCE7;
background: #DCFCE7;
}
.counter-filter--served .counter-filter-badge {
background: #16A34A;
color: #DCFCE7;
}
.counter-filter--cancelled {
color: #B30000;
border-color: #F4D9D9;
background: #F4D9D9;
}
.counter-filter--cancelled .counter-filter-badge {
background: #c62828;
color: #fff;
}
/* View toggle buttons in filter row */
.counter-page-header__filters .d-inline-flex {
gap: 0.4rem;
}
.counter-page-header__filters .d-inline-flex .form-control {
height: 44px;
border-radius: 8px;
border: 1px solid #E2E8F0;
}
.counter-page-header__filters .d-inline-flex .btn-outline-secondary {
width: 44px;
height: 44px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
border: 1px solid #E2E8F0;
background: #E2E8F0;
color: #2d3748;
margin-right: 0 !important;
}
.counter-page-header__filters .d-inline-flex .btn-outline-secondary:hover {
background: #eef4fb;
border: 1px solid #E2E8F0;
color: #2d3748 !important;
}
.counter-page-header__filters .d-inline-flex .btn-outline-secondary:active {
color: #2d3748;
}
.counter-page-header__filters .sort-dropdown-container {
margin-right: 0 !important;
}
.counter-page-header__filters .sort-dropdown-container .btn-outline-secondary {
width: 44px !important;
height: 44px !important;
}
/* Left: title + subtitle stacked */
.counter-page-header__left {
align-items: flex-start;
flex-shrink: 0;
min-width: 140px;
}
.counter-page-header__title {
font-size: var(--fs-page-title, 20px);
font-weight: 800;
color: #1e293b;
line-height: 1.2;
margin: 0;
}
.counter-page-header__subtitle {
font-size: 14px;
color: #64748B;
font-weight: 400;
line-height: 1.35;
margin-top: 2px;
}
/* Center: collapsible search */
.counter-page-header__center {
display: flex;
align-items: center;
flex: 1 1 auto;
justify-content: center;
max-width: 480px;
min-width: 0;
}
.counter-search-wrapper {
position: relative;
width: 100%;
transition: all 0.2s ease;
}
/* Toggle button (visible when collapsed) */
.counter-search__toggle {
display: none;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
border-radius: 10px;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.15s ease;
}
.counter-search__toggle:hover {
background: #f8fafc;
border-color: #cbd5e1;
color: #334155;
}
/* Input wrapper */
.counter-search__input-wrap {
position: relative;
width: 100%;
transition: all 0.2s ease;
}
.counter-search__input-wrap .search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
font-size: 1rem;
pointer-events: none;
}
.counter-search-wrapper .search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
font-size: 1rem;
pointer-events: none;
}
.counter-search-wrapper .form-control {
width: 100%;
padding: 0.6rem 2.5rem 0.6rem 2.5rem !important;
border-radius: 10px;
font-size: 0.88rem;
height: 40px;
border: 1px solid #e2e8f0;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.counter-search-wrapper .form-control::placeholder {
color: #94A3B8;
}
.counter-search-wrapper .form-control:focus {
background: #fff;
border-color: #94a3b8;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
}
/* Close button inside input */
.counter-search__close {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #94a3b8;
font-size: 0.9rem;
cursor: pointer;
border-radius: 6px;
}
.counter-search__close:hover {
background: #f1f5f9;
color: #475569;
}
/* Collapsed state */
.counter-search--collapsed {
width: auto;
min-width: 0;
max-width: none;
}
.counter-search--collapsed .counter-search__toggle {
display: flex;
}
.counter-search--collapsed .counter-search__input-wrap {
width: 0;
overflow: hidden;
opacity: 0;
position: absolute;
pointer-events: none;
}
/* Inline search in filter row */
.counter-search-inline {
display: flex;
align-items: center;
position: relative;
}
.counter-search-inline .counter-search__input-wrap {
position: relative;
transition: width 0.2s ease, opacity 0.15s ease;
width: 260px;
}
.counter-search-inline .counter-search__input-wrap .search-icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: #94A3B8;
font-size: 0.95rem;
pointer-events: none;
z-index: 1;
}
.counter-search-inline .form-control {
width: 100%;
height: calc(1.25em + 1.5rem + 5px);
padding: 0.5rem 2.2rem 0.5rem 2.3rem !important;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 0.85rem;
background: #fff;
}
.counter-search-inline .form-control:focus {
border-color: #94a3b8;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.03);
outline: none;
}
.counter-search-inline .form-control::placeholder {
color: #b0b8c4;
font-size: 0.83rem;
}
.counter-search-inline .counter-search__close {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border: none;
background: #f1f5f9;
color: #64748b;
font-size: 0.8rem;
cursor: pointer;
border-radius: 6px;
}
.counter-search-inline .counter-search__close:hover {
background: #e2e8f0;
color: #334155;
}
.counter-search-inline.counter-search--collapsed .counter-search__toggle {
display: flex;
}
.counter-search-inline.counter-search--collapsed .counter-search__input-wrap {
width: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* Legacy compat */
.counter-search-wrapper .search-shortcut {
display: none;
}
/* Right: action buttons */
.counter-page-header__right {
display: flex;
align-items: center;
flex-shrink: 0;
gap: 0.3rem;
}
.counter-page-header__right .btn-counter-action {
background: #1e293b;
color: #fff;
border: none;
border-radius: 8px;
padding: 0.85rem 2rem;
font-size: 1.05rem;
font-weight: 500;
white-space: nowrap;
transition: background 0.15s ease;
}
.counter-page-header__right .btn-counter-action:hover {
background: #334155;
color: #fff;
}
.counter-page-header__right .btn-counter-action:active {
background: #0f172a;
}
/* Special styling for outlet selector wrapper */
.counter-page-header__right .btn-counter-action:hover {
background: #334155;
}
.counter-page-header__right .outlet-selector-wrapper:hover {
background: #1a202c;
}
.counter-page-header__right .outlet-select {
opacity: 0;
}
/* When select is opened/focused - show it properly */
/* .counter-page-header__right .outlet-select:focus {
opacity: 1 !important;
color: #fff !important;
background: #2d3748 !important;
border-radius: 6px !important;
padding-left: 0.85rem !important;
padding-right: 0.85rem !important;
} */
/* Style the dropdown options */
.counter-page-header__right .outlet-select option {
background: #2d3748 !important;
color: #fff !important;
padding: 0.75rem 1rem !important;
font-size: 1rem !important;
font-weight: 500 !important;
border: none !important;
}
/* Selected option styling */
.counter-page-header__right .outlet-select option:checked {
background: #1e40af !important;
color: #fff !important;
}
/* Hover on options */
.counter-page-header__right .outlet-select option:hover {
background: #1a202c !important;
}
/* Delivery Sector Select Styling */
.delivery-sector-select {
padding: 0.55rem 0.85rem !important;
border-radius: 6px !important;
background-color: #f8f9fa !important;
border: 1px solid #ddd !important;
font-size: 1rem !important;
min-width: 160px !important;
height: 44px !important;
line-height: 1.5 !important;
}
.delivery-sector-select:focus {
background-color: #fff !important;
border-color: #4a90e2 !important;
outline: 0 !important;
box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.15) !important;
}
.delivery-sector-select option {
padding: 0.5rem 0.85rem !important;
font-size: 1rem !important;
}
/* Kitchen Select Styling */
.kitchen-select option {
padding: 8px 12px !important;
font-size: 0.9rem !important;
background: #fff !important;
color: #333 !important;
border: none !important;
}
.kitchen-select option:checked {
background: #1e293b !important;
color: #fff !important;
font-weight: 600 !important;
}
.kitchen-select option:hover {
background: #f8f9fa !important;
}
.kitchen-label {
display: inline-flex;
align-items: center;
}
/* Table Search Styling */
.table-search {
height: 40px !important;
padding: 0.375rem 0.75rem !important;
font-size: 0.9rem !important;
border-radius: 6px !important;
border: 1px solid #ddd !important;
}
.table-search:focus {
border-color: #4a90e2 !important;
outline: 0 !important;
box-shadow: 0 0 0 0.2rem rgba(15, 23, 42, 0.15) !important;
}
/* Content body below the header */
.counter-page-header + .content-body {
padding: 0.5rem 1rem 0rem 1rem;
}
/* Responsive: stack on mobile */
@media (max-width: 991.98px) {
.counter-page-header__row {
flex-wrap: wrap;
padding: 0.75rem 1rem;
gap: 0.75rem;
}
.counter-page-header__center {
order: 3;
max-width: 100%;
width: 100%;
min-width: 0;
}
.counter-page-header__right {
flex-wrap: wrap;
}
.counter-page-header__filters {
padding: 0.4rem 1rem 0.6rem;
overflow-x: auto;
}
}
/* ===== Order Card Redesign ===== */
/* Card container with accent color custom property */
.order-card {
border-radius: 8px;
overflow: hidden;
position: relative;
border: 1px solid rgba(0,0,0,0.06);
margin-bottom: 20px;
--card-accent: #6b7280;
background:white;
display: flex;
flex-direction: column;
}
.order-card--has-badge {
padding-top: 1.9rem;
}
/* Order type color themes */
.order-card--dine-in {
border: 2px solid #FED7AA;
--card-accent: #C2410C;
border-bottom: 0;
}
.order-card--takeout {
border: 2px solid #FBCFE8;
--card-accent: #DB2777;
border-bottom: 0;
}
.order-card--delivery {
border: 2px solid #F2EDB6;
--card-accent: #A16207;
border-bottom: 0;
}
.order-card--cancelled {
background: #f9fafb;
--card-accent: #6b7280;
border-bottom: 0;
}
.order-card--no-footer.order-card--dine-in {
border-bottom: 2px solid #FED7AA;
}
.order-card--no-footer.order-card--takeout {
border-bottom: 2px solid #FBCFE8;
}
.order-card--no-footer.order-card--delivery {
border-bottom: 2px solid #F2EDB6;
}
.order-card--no-footer.order-card--cancelled {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
/* Kitchen full-color card mode */
body.kitchen-full-color-cards .kitchen-main-layout .order-card--dine-in {
background: #FED7AA;
}
body.kitchen-full-color-cards .kitchen-main-layout .order-card--takeout {
background: #FBCFE8;
}
body.kitchen-full-color-cards .kitchen-main-layout .order-card--delivery {
background: #F2EDB6;
}
/* Header */
.order-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0.75rem;
/*border-bottom: 1px solid rgba(0,0,0,0.06);*/
}
.order-card__header-left {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.order-card__type-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.order-card__type-icon i {
font-size: 1.45rem;
}
.order-card__type-info {
display: flex;
flex-direction: column;
gap: 0.1rem;
min-width: 0;
}
.order-card__type-row {
display: flex;
align-items: center;
gap: 0.45rem;
}
.order-card__type-row i {
font-size: 1.45rem;
flex-shrink: 0;
}
.order-card__type-name {
font-weight: 600;
font-size: 12px;
line-height: 1.3;
}
.order-card__type-name a {
color: inherit;
text-decoration: none;
}
.order-card__type-name a:hover {
text-decoration: underline;
}
/* Timer — sits below type name */
.order-card__timer {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
}
span.running-timer {
color: #B30000;
}
.order-card__timer i {
color: #B30000;
font-size: 0.9rem;
}
.order-card__timer span.running-timer {
font-size: 12px !important;
color: #B30000;
}
/* Timer urgency colors */
.order-card__timer--ok i,
.order-card__timer--ok span.running-timer { color: #16a34a !important; }
.order-card__timer--warning i,
.order-card__timer--warning span.running-timer { color: #d97706 !important; }
.order-card__header-right {
flex-shrink: 0;
padding-top: 0.1rem;
}
/* Status pill — outlined border style */
.order-card__status-pill {
display: inline-flex;
align-items: center;
border-radius: 20px;
padding: 0.5rem 0.8rem;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
border: 1.5px solid;
background: rgba(255,255,255,0.5);
}
.order-card__status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
margin-left: 0.4rem;
flex-shrink: 0;
}
/* Status pill color variants */
.order-card__status-pill--new {
background: #d1fae5;
border-color: #86efac;
color: #065f46;
}
.order-card__status-pill--new .order-card__status-dot {
background: #10b981;
}
.order-card__status-pill--preparing {
background: #ffedd5;
border-color: #fed7aa;
color: #9a3412;
}
.order-card__status-pill--preparing .order-card__status-dot {
background: #f97316;
}
.order-card__status-pill--ready {
background: #dbeafe;
border-color: #93c5fd;
color: #1e40af;
}
.order-card__status-pill--ready .order-card__status-dot {
background: #3b82f6;
}
.order-card__status-pill--served {
background: #d1fae5;
border-color: #86efac;
color: #166534;
}
.order-card__status-pill--served .order-card__status-dot {
background: #16a34a;
}
.order-card__status-pill--cancelled {
background: #fee2e2;
border-color: #fca5a5;
color: #991b1b;
}
.order-card__status-pill--cancelled .order-card__status-dot {
background: #ef4444;
}
.order-card__status-pill--out-for-delivery {
background: #ede9fe;
border-color: #c4b5fd;
color: #5b21b6;
}
.order-card__status-pill--out-for-delivery .order-card__status-dot {
background: #8b5cf6;
}
.order-card__status-pill--delivered {
background: #d1fae5;
border-color: #86efac;
color: #166534;
}
.order-card__status-pill--delivered .order-card__status-dot {
background: #16a34a;
}
/* Info row */
.order-card__info {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0rem 0.79rem;
padding-bottom: 6px;
border-bottom: 1px solid rgb(0, 0, 0, 0.04);
gap: 0.5rem;
}
.order-card__info-left {
min-width: 0;
flex: 1;
}
.order-card__customer {
font-size: 0.9rem;
/*color: #333;*/
}
.order-card__customer-name {
/*font-weight: 600;*/
}
.order-card__meta {
font-size: 0.85rem;
color: #666;
margin-top: 2px;
}
.order-card__meta .order-card__note {
font-style: italic;
font-weight: 600;
display: block;
padding-top: 2px;
}
.order-card__meta .order-card__internal-note {
font-style: italic;
display: block;
padding-top: 2px;
}
.order-card__badges {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-top: 3px;
}
.order-card__badge {
font-size: 0.72rem;
font-weight: 500;
padding: 0.1rem 0.4rem;
border-radius: 4px;
white-space: nowrap;
}
.order-card__badge--paid {
background: #dcfce7;
color: #166534;
}
.order-card__badge--closed {
background: #d1fae5;
color: #166534;
}
.order-card__badge--credit {
background: #fef3c7;
color: #92400e;
}
.order-card__info-right {
text-align: right;
flex-shrink: 0;
}
.order-card__amount {
font-weight: 500;
font-size: 12px;
color: #1e1e1e;
}
.order-card__reference {
font-size: 12px;
}
.order-card__item-count {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 2px;
}
/* Line items container */
.order-card__items {
padding: 0;
padding-bottom: 15px;
flex: 1;
}
/* Line item row — stacked layout: status label on own line, then details row */
.order-card__item-row {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid rgba(0,0,0,0.06);
cursor: pointer;
}
.order-card__item-row:last-child {
border-bottom: none;
}
.order-card__item-row:hover {
background: rgba(0,0,0,0.02);
}
/* Status label on its own line */
.order-card__item-status {
font-size: 12px;
font-weight: 500;
margin-bottom: 0.2rem;
}
.order-card__item-status--served {
color: #16a34a;
}
.order-card__item-status--ready {
color: #2563eb;
}
.order-card__item-status--pending {
color: #334155
}
/* Grouped status header */
.order-card__item-group-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 0.35rem 0.75rem 0.15rem;
border-bottom: 1px solid rgba(0,0,0,0.04);
background: rgba(0,0,0,0.015);
}
/* Details row: qty + name + active button */
.order-card__item-details {
display: flex;
align-items: flex-start;
gap: 0.6rem;
}
.order-card__item-qty {
min-width: 24px;
font-weight: 700;
font-size: 14px;
flex-shrink: 0;
}
.order-card__item-name {
flex: 1;
font-weight: 600;
/*font-size: 1.05rem;*/
min-width: 0;
color: #000000;
}
.order-card__item-name--served {
text-decoration: line-through;
}
.order-card__item-modifiers {
padding-left: 0;
margin-top: 3px;
margin-bottom: 2px;
}
.order-card__item-modifiers .modifier-group-name {
font-size: 0.85rem;
color: #d62929;
font-weight: 500;
margin-bottom: 1px;
}
.order-card__item-modifiers ul {
padding-left: 1rem;
list-style-type: circle;
margin-bottom: 4px;
margin-top: 0;
}
.order-card__item-modifiers li {
font-size: 0.85rem;
color: #d62929;
font-weight: 400;
}
.order-card__item-sub {
font-size: 0.85rem;
color: #d62929;
font-weight: 400;
display: block;
}
/* Active button — outlined with card accent color */
.order-card__item-action {
flex-shrink: 0;
align-self: center;
margin-left: auto;
}
.order-card__item-action .btn-ready-flag {
background: transparent;
border: none;
color: #e74c3c;
font-size: 1.2rem;
cursor: pointer;
padding: 0.2rem;
transition: transform 0.15s ease, color 0.15s ease;
}
.order-card__item-action .btn-ready-flag:hover {
transform: scale(1.2);
color: #e74c3c;
}
/* Footer — prominent tinted background */
.order-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0rem;
flex-shrink: 0;
margin-top: auto;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap;
scrollbar-width: none;
}
.order-card__footer:hover {
scrollbar-width: thin;
}
.order-card__footer::-webkit-scrollbar {
height: 0;
background: transparent;
}
.order-card__footer:hover::-webkit-scrollbar {
height: 4px;
}
.order-card__footer:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.15);
border-radius: 3px;
}
.order-card__footer--dine-in {
background: #FED7AA;
}
.order-card__footer--takeout {
background: #FBCFE8;
}
.order-card__footer--delivery {
background: #F2EDB6;
}
.order-card__footer--cancelled {
background: #e5e7eb;
}
.order-card__footer-action {
display: flex;
align-items: center;
justify-content: center;
border-right: 2px solid rgba(255, 255, 255, 0.8);
align-self: stretch;
flex: 1 0 auto;
white-space: nowrap;
}
.order-card__footer-action--kot {
border-right: 0;
}
.order-card .order-card__footer-action--kot a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
width: 100%;
padding: 0.85rem;
text-align: center;
color: var(--card-accent) !important;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.01em;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.order-card .order-card__footer-action--kot a i {
color: var(--card-accent) !important;
font-size: 1rem;
}
.order-card .order-card__footer-action--kot a:hover,
.order-card .order-card__footer-action--kot a:focus {
background-color: rgba(0, 0, 0, 0.06);
color: var(--card-accent) !important;
text-decoration: none;
}
.order-card .order-card__footer-action--kot a + a {
border-left: 2px solid rgba(255, 255, 255, 0.8);
}
.order-card .order-card__footer-action a + a {
border-left: 2px solid rgba(255, 255, 255, 0.8);
}
/* Dark modal overrides: boost Print/Preview contrast inside .modal-dark */
.modal-dark .order-card__footer--dine-in {
background: #7C2D12;
}
.modal-dark .order-card__footer--takeout {
background: #9D174D;
}
.modal-dark .order-card__footer--delivery {
background: #78350F;
}
.modal-dark .order-card__footer--cancelled {
background: #374151;
}
.modal-dark .order-card .order-card__footer-action--kot a,
.modal-dark .order-card .order-card__footer-action--kot a i {
color: #FFFFFF !important;
}
.modal-dark .order-card .order-card__footer-action--kot a:hover,
.modal-dark .order-card .order-card__footer-action--kot a:focus {
background-color: rgba(255, 255, 255, 0.08);
color: #FFFFFF !important;
}
.modal-dark .order-card .order-card__footer-action--kot a + a,
.modal-dark .order-card .order-card__footer-action a + a {
border-left: 2px solid rgba(255, 255, 255, 0.2);
}
.order-card__footer-actions {
display: flex;
align-items: center;
flex-shrink: 0;
/*gap: 0.9rem;*/
}
.order-card__footer-actions .order-card-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--card-accent, #555) !important;
font-size: 1.35rem;
text-decoration: none;
padding: 1rem
}
.order-card__footer-actions .order-card-action-icon:hover {
opacity: 0.7;
}
.order-card__footer-actions .order-card-action-icon + .order-card-action-icon {
border-left: 2px solid rgb(255 255 255);
}
/* Primary button inside order-card — outlined with accent color */
.order-card .order-card-primary-btn {
background: transparent;
border: none;
color: var(--card-accent) !important;
font-weight: 700;
font-size: 1rem;
border-radius: 0;
padding: 0.35rem 0.75rem;
width: 100%;
height: 100%;
align-content: space-around;
}
.order-card .order-card-primary-btn:hover {
background: transparent;
color: var(--card-accent) !important;
opacity: 0.8;
text-decoration: none;
}
/* Responsive adjustments for order cards on tablets */
@media (max-width: 991.98px) {
.order-card__header {
padding: 0.65rem;
}
.order-card__info {
padding: 0.5rem 0.65rem;
}
.order-card__item-row {
padding: 0.5rem 0.65rem;
}
.order-card__footer {
padding: 0.6rem 0.65rem;
}
}
@media (max-width: 767.98px) {
.order-card__info {
flex-direction: column;
gap: 0.25rem;
}
.order-card__info-right {
text-align: left;
}
.order-card__item-status {
font-size: 0.78rem;
}
}
/* Override col-xl-3: keep 3 columns at 1200-1399px */
@media (min-width: 1200px) and (max-width: 1399.98px) {
.order-grid-dashboard > .grid-item.col-xl-3 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}
/* 4 cards per row on wide screens (≥1400px) */
@media (min-width: 1400px) {
.order-grid-dashboard > .grid-item {
flex: 0 0 25%;
max-width: 25%;
}
}
/* 5 cards per row on extra-wide screens (≥1700px) */
@media (min-width: 1700px) {
.order-grid-dashboard > .grid-item {
flex: 0 0 20%;
max-width: 20%;
}
}
/* ============================================================
Grid (non-masonry) Layout — uniform row heights
============================================================ */
.order-layout--grid {
display: flex !important;
flex-wrap: wrap;
}
.order-layout--grid .grid-item {
display: flex;
}
.order-layout--grid .grid-item .order-card {
width: 100%;
}
/* ============================================================
Flex (auto-height) Grid Layout — rows without equal height
============================================================ */
.order-layout--flex {
display: flex !important;
flex-wrap: wrap;
align-items: flex-start;
}
/* ============================================================
Compact Card Layout
============================================================ */
.order-layout--compact .grid-item {
flex: 0 0 25% !important;
max-width: 25% !important;
}
.order-layout--compact .order-card {
margin-bottom: 10px;
}
.order-layout--compact .order-card__header {
padding: 0.45rem 0.6rem;
}
.order-layout--compact .order-card__type-icon {
display: none;
}
.order-layout--compact .order-card__type-name {
font-size: 11px;
}
.order-layout--compact .order-card__timer {
font-size: 0.7rem;
}
.order-layout--compact .order-card__timer span.running-timer {
font-size: 10px !important;
}
.order-layout--compact .order-card__status-pill {
font-size: 11px;
padding: 0.3rem 0.55rem;
}
.order-layout--compact .order-card__status-dot {
width: 8px;
height: 8px;
}
.order-layout--compact .order-card__info {
padding: 0.25rem 0.6rem;
padding-bottom: 4px;
}
.order-layout--compact .order-card__info-left {
display: none;
}
.order-layout--compact .order-card__amount {
font-size: 11px;
}
.order-layout--compact .order-card__reference {
font-size: 10px;
}
.order-layout--compact .order-card__item-count {
font-size: 0.65rem;
}
.order-layout--compact .order-card__item-group-header {
font-size: 10px;
padding: 0.2rem 0.6rem 0.1rem;
}
.order-layout--compact .order-card__item-row {
padding: 0.3rem 0.6rem;
}
.order-layout--compact .order-card__item-qty {
font-size: 12px;
min-width: 18px;
}
.order-layout--compact .order-card__item-name {
font-size: 12px;
font-weight: 500;
}
.order-layout--compact .order-card__item-modifiers {
font-size: 0.75rem;
}
.order-layout--compact .order-card__items {
padding-bottom: 8px;
}
.order-layout--compact .order-card__footer-action {
min-width: 70px;
}
.order-layout--compact .order-card .order-card-primary-btn {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
}
.order-layout--compact .order-card-action-icon {
font-size: 1.1rem !important;
padding: 0.6rem !important;
}
@media (min-width: 1200px) {
.order-layout--compact .grid-item {
flex: 0 0 25% !important;
max-width: 25% !important;
}
}
@media (min-width: 1400px) {
.order-layout--compact .grid-item {
flex: 0 0 20% !important;
max-width: 20% !important;
}
}
@media (min-width: 1700px) {
.order-layout--compact .grid-item {
flex: 0 0 16.666% !important;
max-width: 16.666% !important;
}
}
/* ============================================================
Order List View — Horizontal Row Layout
============================================================ */
.order-list-view {
padding: 0.5rem 0;
}
.order-list-row {
display: flex;
align-items: center;
padding: 0.85rem 1.25rem;
border: 1px solid #e2e8f0;
border-radius: 10px;
margin-bottom: 0.5rem;
background: #fff;
gap: 1.25rem;
transition: box-shadow 0.15s ease, border-color 0.15s ease;
min-height: 64px;
}
.order-list-row:hover {
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
border-color: #cbd5e1;
}
/* Type column */
.order-list-row__type {
display: flex;
align-items: center;
gap: 0.6rem;
min-width: 130px;
flex-shrink: 0;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.order-list-row__type:hover {
color: inherit;
text-decoration: none;
}
.order-list-row__type-icon {
display: flex;
align-items: center;
flex-shrink: 0;
}
.order-list-row__type-icon i {
font-size: 1.5rem;
}
.order-list-row__type-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.order-list-row__type-name {
font-weight: 600;
font-size: 0.875rem;
color: #1e1e1e;
white-space: nowrap;
}
.order-list-row__timer {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.8rem;
}
.order-list-row__timer i {
color: #B30000;
font-size: 0.85rem;
}
.order-list-row__timer .running-timer {
color: #B30000;
font-size: 0.8rem;
}
/* Timer urgency colors for list view */
.order-list-row__timer--ok i,
.order-list-row__timer--ok .running-timer { color: #16a34a !important; }
.order-list-row__timer--warning i,
.order-list-row__timer--warning .running-timer { color: #d97706 !important; }
/* Status column */
.order-list-row__status {
min-width: 110px;
flex-shrink: 0;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.order-list-row__status:hover {
color: inherit;
text-decoration: none;
}
/* Customer column */
.order-list-row__customer {
flex: 1;
min-width: 0;
}
.order-list-row__customer-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
gap: 0.15rem;
}
.order-list-row__customer-link:hover {
color: inherit;
text-decoration: none;
}
.order-list-row__customer-primary {
font-size: 0.875rem;
font-weight: 500;
color: #1e1e1e;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.order-list-row__customer-secondary {
font-size: 0.8rem;
color: #888;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Amount column */
.order-list-row__amount {
display: flex;
flex-direction: column;
align-items: flex-end;
min-width: 110px;
flex-shrink: 0;
gap: 0.1rem;
text-decoration: none;
color: inherit;
cursor: pointer;
}
.order-list-row__amount:hover {
color: inherit;
text-decoration: none;
}
.order-list-row__total {
font-weight: 600;
font-size: 0.875rem;
color: #1e1e1e;
}
.order-list-row__reference {
font-size: 0.8rem;
color: #888;
}
/* Meta column (item count + badges) */
.order-list-row__meta {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 80px;
flex-shrink: 0;
}
.order-list-row__item-count {
font-size: 0.78rem;
color: #94a3b8;
white-space: nowrap;
}
/* Action buttons column */
.order-list-row__actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.order-list-row__btn {
font-size: 0.8rem;
font-weight: 600;
padding: 0.4rem 1rem;
border-radius: 6px;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
line-height: 1.4;
}
.order-list-row__btn--outline {
background: #fff;
border: 1.5px solid #d1d5db;
color: #1e1e1e;
}
.order-list-row__btn--outline:hover {
background: #f9fafb;
border-color: #9ca3af;
color: #1e1e1e;
text-decoration: none;
}
.order-list-row__btn--filled {
background: #1e1e1e;
border: 1.5px solid #1e1e1e;
color: #fff;
}
.order-list-row__btn--filled:hover {
background: #333;
border-color: #333;
color: #fff;
text-decoration: none;
}
/* Print column */
.order-list-row__print {
flex-shrink: 0;
min-width: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.order-list-row__print-btn {
display: inline-flex;
align-items: center;
justify-content: center;
color: #6b7280;
font-size: 1.25rem;
text-decoration: none;
padding: 0.25rem;
}
.order-list-row__print-btn:hover {
color: #1e1e1e;
}
/* Empty state */
.order-list-view__empty {
padding: 2rem 1.5rem;
color: #9ca3af;
font-size: 0.9rem;
}
/* Responsive adjustments for list view */
@media (max-width: 991.98px) {
.order-list-row {
flex-wrap: wrap;
gap: 0.75rem;
padding: 0.75rem 1rem;
}
.order-list-row__type {
min-width: auto;
}
.order-list-row__customer {
flex-basis: 100%;
order: 5;
}
.order-list-row__actions {
flex-basis: 100%;
order: 6;
justify-content: flex-end;
}
}
@media (max-width: 767.98px) {
.order-list-row {
padding: 0.65rem 0.75rem;
gap: 0.5rem;
}
.order-list-row__status {
min-width: auto;
}
.order-list-row__amount {
min-width: auto;
}
}
/* ============================================================
Order Details Modal — Two-Column Layout
============================================================ */
/* Force the modal body to fill viewport so children can stretch */
#MakePaymentRestaurantOrderModal .modal-body {
display: flex;
flex-direction: column;
}
#MakePaymentRestaurantOrderModal .modal-body > form,
#MakePaymentRestaurantOrderModal .modal-body > #orderDetailsContentContainer,
#MakePaymentRestaurantOrderModal .modal-body > #orderDetailsContentContainer > form {
flex: 1;
display: flex;
flex-direction: column;
padding: 26px 15px;
}
.od-container {
display: flex;
gap: 2rem;
flex: 1;
}
.od-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.od-right {
flex: 1;
min-width: 0;
border-left: 1px solid #eee;
padding-left: 2rem;
display: flex;
flex-direction: column;
}
/* Header row */
.od-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.od-title {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}
.od-header-actions {
margin-left: auto;
display: flex;
gap: 0.5rem;
align-items: center;
}
.od-pill-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
border: 1px solid #ddd;
border-radius: 20px;
padding: 4px 14px;
font-size: 0.8rem;
background: #fff;
cursor: pointer;
text-decoration: none;
color: inherit;
white-space: nowrap;
}
.od-pill-btn:hover {
background: #f5f5f5;
text-decoration: none;
color: inherit;
}
.od-pill-btn i {
font-size: 0.9rem;
}
/* Info grid */
.od-info-grid {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.5rem 1.5rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.od-info-label {
color: #64748B;
white-space: nowrap;
}
.od-info-value {
text-align: right;
font-weight: 500;
}
/* Items table */
.od-items-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
}
.od-items-table th {
font-weight: 600;
font-size: 0.9rem;
padding: 0.5rem 0;
text-align: left;
}
.od-items-table th.text-right {
text-align: right;
}
.od-items-table td {
padding: 0.35rem 0;
border-bottom: 1px solid #f5f5f5;
vertical-align: top;
}
.od-items-table td.text-right {
text-align: right;
}
.od-item-modifier {
font-size: 0.8rem;
color: #d62929;
padding-left: 1rem;
}
.od-item-voided {
text-decoration: line-through;
}
/* Totals */
.od-totals {
font-size: 0.9rem;
margin-top: auto;
}
.od-totals-row {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
align-items: center;
}
.od-totals-row--total {
font-weight: 700;
border-top: 1px solid #eee;
padding-top: 0.75rem;
margin-top: 0.25rem;
}
.od-totals-row--subtotal {
border-top: 1px solid #eee;
padding-top: 0.5rem;
margin-top: 0.25rem;
}
/* KOT pills */
.od-kot-pills {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: 1rem;
}
.od-kot-pill {
display: inline-flex;
align-items: center;
gap: 0.3rem;
border: 1px solid #eee;
border-radius: 6px;
padding: 4px 10px;
font-size: 0.85rem;
background: #fff;
text-decoration: none;
color: inherit;
}
.od-kot-pill:hover {
background: #f5f5f5;
text-decoration: none;
color: inherit;
}
/* Customer section */
.od-customer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.od-customer-header h3 {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
}
.od-customer-info {
font-size: 0.9rem;
}
.od-customer-row {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
.od-customer-label {
min-width: 100px;
flex-shrink: 0;
}
.od-customer-value {
font-weight: 500;
}
.od-payment-bottom {
margin-top: auto;
}
.od-divider {
border: none;
border-top: 1px solid #eee;
margin: 1.5rem 0;
}
/* Payment section */
.od-payment-header {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 1rem;
color: black;
}
.od-payment-tabs {
display: flex;
gap: 0.75rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
align-items: center;
}
.od-payment-tab-group {
display: inline-flex;
border: 1px solid #94A3B8;
border-radius: 6px;
overflow: hidden;
background: #fff;
}
.od-payment-tab {
cursor: pointer;
border: none;
background: #fff;
padding: 0.72rem 0.85rem;
font-weight: 500;
color: #1e293b;
transition: background 0.15s, color 0.15s;
border-right: 1px solid #94A3B8;
margin: 0;
border-radius: 0;
}
.od-payment-tab:last-child {
border-right: none;
}
.od-payment-tab:hover {
background: #f8fafc;
}
.od-payment-tab--active,
.od-payment-tab--active:hover {
background: #1e293b;
color: #fff;
border-color: #1e293b;
}
.od-payment-add-btn {
display: inline-flex;
align-items: center;
gap: 4px;
}
.od-payment-methods {
margin-bottom: 1rem;
}
.od-payment-methods .payment-method-item,
.od-payment-methods .payment-method-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0;
margin-bottom: 0;
}
.od-payment-methods .pm-label {
min-width: 60px;
font-size: 0.9rem;
font-weight: 500;
color: #1e293b;
flex-shrink: 0;
}
.od-payment-methods .pm-amount-group {
display: inline-flex;
align-items: center;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.od-payment-methods .pm-currency {
padding: 9px 10px;
font-size: 0.85rem;
font-weight: 500;
color: #64748b;
white-space: nowrap;
user-select: none;
}
.od-payment-methods .pm-amount-input {
border: none;
outline: none;
padding: 9px 12px;
font-weight: 500;
width: 100px;
background: transparent;
}
.od-payment-methods .pm-amount-input:focus {
box-shadow: none;
}
/* ============================================
Modifier Section - Enhanced Styles
============================================ */
/* Clear button with improved visibility */
.btn-clear-modifier-selection {
background: #B30000 !important;
color: #fff !important;
padding: 0.35rem 0.9rem !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
border-radius: 6px !important;
opacity: .85 !important;
/* cursor: pointer !important; */
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.btn-clear-modifier-selection:hover {
opacity: 1 !important;
}
.btn-clear-modifier-selection:active {
opacity: 1 !important;
}
/* Constraint badge with better contrast */
.badge-constraint:hover {
background: #bfdbfe !important;
border-color: #93c5fd !important;
}
/* Modifier group header improvements */
.modifier-group-name {
font-weight: 600 !important;
color: #1e293b !important;
}
.od-payment-methods .pm-ref-input {
border: 1.5px solid #e2e8f0;
border-radius: 10px;
padding: 9px 12px;
font-size: 0.85rem;
outline: none;
background: #fff;
flex: 1;
min-width: 0;
}
.od-payment-methods .pm-ref-input:focus {
border-color: #94a3b8;
}
.od-payment-methods .pm-ref-input::placeholder {
color: #94a3b8;
}
.od-payment-methods .pm-remove-btn {
cursor: pointer;
padding: 7.5px 10px;
flex-shrink: 0;
}
.od-payment-actions {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
margin-top: 1.5rem;
}
.od-btn-primary {
background: #333;
color: #fff;
border: none;
border-radius: 8px;
padding: 8px 20px;
font-size: 0.85rem;
cursor: pointer;
font-weight: 600;
}
.od-btn-primary:hover {
background: #222;
}
.od-btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.od-btn-outline {
background: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 8px 20px;
font-size: 0.85rem;
cursor: pointer;
}
.od-btn-outline:hover {
background: #f5f5f5;
}
/* Existing payments list */
.od-payment-record {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 0.4rem 0;
font-size: 0.9rem;
}
.od-payment-record-label {
font-weight: 600;
}
.od-payment-record-amount {
font-weight: 600;
text-align: right;
}
/* Status pills for order details (reuse card pill design) */
.od-status-pills {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
/* Outstanding alert */
.od-outstanding-alert {
font-size: 0.9rem;
border-left: 4px solid #f39c12;
padding: 0.5rem;
background: #fff3cd;
border-radius: 4px;
margin-top: 0.75rem;
}
/* Responsive: stack columns on smaller screens */
@media (max-width: 991.98px) {
.od-container {
flex-direction: column;
}
.od-right {
border-left: none;
padding-left: 0;
border-top: 1px solid #eee;
padding-top: 1.5rem;
}
}
/* ───── Order-Taking View ───── */
.ot-main {
display: flex;
flex-direction: row;
height: calc(100vh - 10px);
min-height: 0;
}
.ot-sidebar {
width: 75px;
min-width: 62px;
display: flex;
flex-direction: column;
align-items: center;
padding: 13px 6px;
margin-left: 15px;
overflow: hidden;
transition: width 0.25s ease, min-width 0.25s ease;
will-change: width;
}
#otCategorySidebar {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
width: 100%;
flex: 1;
overflow-y: auto;
scrollbar-width: none;
}
#otCategorySidebar::-webkit-scrollbar {
display: none;
}
.ot-cat-btn {
width: 48px;
height: 48px;
min-height: 48px;
border-radius: 10px;
border: 1px solid transparent;
background: #E2E8F0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s;
padding: 0;
}
.ot-cat-btn:hover {
border: 1px solid #383e48;
}
.ot-cat-btn.active {
border: 1px solid #262f3f;
}
.ot-cat-btn img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ot-cat-initials {
font-size: 0.85rem;
font-weight: 700;
color: #64748b;
text-transform: uppercase;
line-height: 1;
user-select: none;
}
/* Category sidebar toggle button */
.ot-sidebar-toggle {
width: 48px;
height: 28px;
min-height: 28px;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
background: #f8fafc;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #64748b;
font-size: 0.8rem;
transition: background 0.15s ease, color 0.15s ease, width 0.25s ease;
margin-top: 14px;
}
.ot-sidebar-toggle:hover {
background: #e2e8f0;
color: #0f172a;
}
/* Expanded category sidebar */
.ot-sidebar.expanded {
width: 160px;
min-width: 160px;
align-items: stretch;
}
.ot-sidebar.expanded #otCategorySidebar {
align-items: stretch;
}
.ot-sidebar.expanded .ot-cat-btn {
width: 100%;
height: auto;
min-height: 40px;
flex-direction: row;
justify-content: flex-start;
gap: 8px;
padding: 6px 6px;
border-radius: 8px;
}
.ot-sidebar.expanded .ot-cat-btn img {
width: 28px;
height: 28px;
border-radius: 6px;
flex-shrink: 0;
}
.ot-sidebar.expanded .ot-cat-initials {
width: 28px;
min-width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
background: #cbd5e1;
border-radius: 6px;
flex-shrink: 0;
}
.ot-sidebar.expanded .ot-cat-label {
display: block;
font-size: 0.78rem;
font-weight: 500;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
line-height: 1.2;
}
/* Hide label in collapsed mode */
.ot-cat-label {
display: none;
}
.ot-sidebar.expanded .ot-sidebar-toggle {
width: 100%;
}
.ot-sidebar.expanded .ot-back-btn {
width: 100%;
}
.ot-content {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
overflow: hidden;
margin: 10px;
border-radius: 6px;
}
.ot-header {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
padding: 6px 5px;
}
.ot-back-btn {
width: 45px;
height: 45px;
min-width: 45px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.5rem;
color: #000000;
transition: background 0.15s ease, width 0.25s ease, opacity 0.15s ease;
margin-bottom: 7px;
font-weight: 600;
flex-shrink: 0;
overflow: hidden;
}
.ot-back-btn:hover {
background: #f1f5f9;
}
.ot-back-btn:disabled,
.ot-back-btn.is-loading {
cursor: wait;
opacity: 0.7;
}
.ot-back-btn > i {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: transform 0.2s ease, opacity 0.15s ease;
}
.ot-back-btn.is-loading > i {
animation: ot-back-spin 0.7s linear infinite;
}
@keyframes ot-back-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.ot-header-title {
display: flex;
flex-direction: column;
min-width: 0;
}
.ot-menu-dropdown-wrapper {
position: relative;
}
.ot-menu-dropdown {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
max-height: 280px;
overflow-y: auto;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
z-index: 1050;
margin-top: 4px;
padding: 4px 0;
}
.ot-menu-dropdown-item {
padding: 10px 14px;
font-size: 0.88rem;
font-weight: 600;
color: #0c0c0c;
cursor: pointer;
transition: background 0.15s;
}
.ot-menu-dropdown-item:hover {
background: #f1f5f9;
}
.ot-menu-dropdown-trigger {
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}
.ot-menu-dropdown-trigger i {
font-size: 0.7rem;
color: #64748B;
}
.ot-menu-name {
font-weight: 700;
font-size: 16px;
color: #0f172a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ot-category-name {
font-size: 12px;
color: #64748B;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ot-header-search {
position: relative;
flex: 1;
margin-left: auto;
}
.ot-search-icon {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
color: #0e0e0e;
font-size: 0.85rem;
pointer-events: none;
}
.ot-header-search .product-lookup {
width: 100%;
padding: 7px 58px 7px 32px;
border: 1px solid #e5e7eb;
border-radius: 6px;
font-size: 1rem;
outline: none;
transition: border-color 0.15s;
background: #fff;
height: 43px;
}
.ot-header-search .product-lookup:focus {
border-color: #3b82f6;
}
.ot-search-kbd {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 0.65rem;
color: #94a3b8;
background: #f1f5f9;
border: 1px solid #e2e8f0;
border-radius: 4px;
padding: 1px 6px;
pointer-events: none;
user-select: none;
}
.ot-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
grid-auto-rows: min-content;
align-content: start;
gap: 12px;
overflow-y: auto;
padding:3px;
flex: 1;
max-height: calc(100vh - 80px);
}
.ot-product-card {
background: #fff;
border-radius: 10px;
border: 1.5px solid #e5e7eb;
overflow: hidden;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.ot-product-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.07);
}
.ot-product-card.active {
border-color: #1c2636;
box-shadow: 0 0 0 2px rgb(59 59 59 / 18%);
}
.ot-product-card.disabled-product {
opacity: 0.55;
pointer-events: none;
cursor: not-allowed;
}
.ot-product-img {
height: 100px;
width: 100%;
background: #F1F5F9;
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid #E2E8F0;
}
.ot-product-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ot-product-initials {
font-size: 1.8rem;
font-weight: 700;
color: #cbd5e1;
text-transform: uppercase;
user-select: none;
}
.ot-product-info {
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 2px;
}
.ot-product-name {
font-size: 0.85rem;
font-weight: 600;
color: #1e293b;
line-height: 1.3;
}
.ot-product-price {
font-size: 0.78rem;
color: #64748b;
}
.ot-product-variant-label {
font-size: 0.75rem;
color: #86b0f3;
font-weight: 500;
}
/* ── Select Variant Modal ── */
.sv-container {
display: flex;
flex-direction: column;
}
.sv-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 20px;
}
.sv-back-btn {
width: 40px;
height: 40px;
border-radius: 10px;
border: 1.5px solid #e5e7eb;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.1rem;
color: #1e293b;
transition: background 0.15s;
flex-shrink: 0;
}
.sv-back-btn:hover {
background: #f1f5f9;
}
.sv-header-title {
font-size: 1.1rem;
font-weight: 700;
color: #1e293b;
margin: 0;
}
.sv-body {
flex: 1;
}
.sv-section-title {
font-size: 1rem;
font-weight: 700;
color: #1e293b;
margin-bottom: 4px;
}
.sv-section-subtitle {
font-size: 0.82rem;
color: #94a3b8;
margin-bottom: 16px;
}
.sv-variant-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.sv-variant-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
cursor: pointer;
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.sv-variant-card:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sv-variant-card.sv-variant-selected {
border-color: #1c2636;
box-shadow: 0 0 0 2px rgba(28, 38, 54, 0.15);
background: #f8fafc;
}
.sv-variant-card.sv-variant-disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}
.sv-variant-initials {
width: 44px;
height: 44px;
border-radius: 10px;
background: #f1f5f9;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 600;
color: #94a3b8;
flex-shrink: 0;
}
.sv-variant-info {
flex: 1;
min-width: 0;
}
.sv-variant-name {
font-size: 0.88rem;
font-weight: 600;
color: #1e293b;
line-height: 1.3;
}
.sv-variant-price {
font-size: 0.8rem;
color: #64748b;
margin-top: 2px;
}
.sv-variant-badge-disabled {
font-size: 0.7rem;
color: #ef4444;
font-weight: 500;
}
.sv-footer {
padding-top: 20px;
}
.sv-add-item-btn {
background: #1c2636;
color: #fff;
border: none;
border-radius: 12px;
padding: 14px;
font-size: 0.92rem;
font-weight: 600;
transition: background 0.15s, opacity 0.15s;
}
.sv-add-item-btn:hover:not(:disabled) {
background: #2d3a4d;
color: #fff;
}
.sv-add-item-btn:disabled {
background: #1c2636;
color: #fff;
opacity: 0.5;
cursor: not-allowed;
}
.ot-empty-state {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 200px;
color: #94a3b8;
font-size: 0.9rem;
}
/* ── Order-Taking: Right Column (Order Panel) ── */
.ot-order-panel {
display: flex;
flex-direction: column;
height: calc(100vh - 30px);
background: #fff;
border: 1px solid #CBD5E1;
border-radius: 6px;
margin: 10px 24px 10px -4px
}
.ot-order-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #e9ecef;
}
.ot-order-header h3 {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
color: #1e293b;
}
.ot-order-header .ot-order-ref {
font-size: 0.82rem;
color: #64748b;
margin-left: 8px;
}
.ot-order-scroll {
flex: 1;
overflow-y: auto;
padding: 0;
}
.ot-order-footer {
flex-shrink: 0;
background: #fff;
border-radius: 6px;
}
/* Info Grid */
.ot-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid #e2e8f0;
border-radius: 10px;
margin: 18px 19px 0;
overflow: hidden;
transition: border-color 0.3s ease, margin 0.3s ease;
}
.ot-info-item {
display: flex;
flex-direction: column;
justify-content: center;
padding: 10px 14px;
border-bottom: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
transition: padding 0.3s ease, border-color 0.3s ease;
}
/* Remove right border on even-column (right-side) items */
.ot-info-item:nth-child(2n) {
border-right: none;
}
/* Remove right border on full-span items (e.g. Customer) */
.ot-info-item[style*="grid-column"] {
border-right: none;
}
/* Remove bottom border on last row items:
last-child = full-span Customer,
nth-last-child(2) + nth-last-child(3) = the paired row right above it */
.ot-info-label {
font-size: 12px;
color: #64748B;
margin-bottom: 2px;
max-height: 18px;
overflow: hidden;
transition: opacity 0.2s ease, max-height 0.3s ease, margin-bottom 0.2s ease;
}
.ot-info-value {
font-size: 0.85rem;
font-weight: 600;
color: #0F172A;
}
.ot-info-value select,
.ot-info-value input {
font-size: 0.82rem;
border: 1px solid #e2e8f0 !important;
border-radius: 6px;
padding: 4px 8px !important;
width: 100%;
background: #fff;
height: auto !important;
margin: 0;
}
/* Click-to-edit: display mode (default) */
.ot-info-item:has(.ot-editable) {
cursor: pointer;
}
.ot-info-item:has(.ot-editable.editing) {
cursor: default;
}
.ot-editable .ot-edit-controls {
display: none;
}
/* Click-to-edit: editing mode */
.ot-editable.editing .ot-info-display {
display: none;
}
.ot-editable.editing .ot-edit-controls {
display: block;
}
.ot-editable.ot-customer-inline.editing .ot-edit-controls {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
}
/* Customer inline within info grid */
.ot-customer-inline {
display: flex;
align-items: center;
gap: 8px;
}
.ot-customer-inline select {
flex: 1;
}
.ot-info-edit-link {
color: #64748b;
flex-shrink: 0;
text-decoration: none;
}
.ot-info-edit-link:hover {
color: #3b82f6;
}
/* Loyalty inline (hidden select for JS) */
.ot-loyalty-inline {
padding: 0 16px;
}
/* Notes Section */
.ot-notes-section {
padding: 14px 22px;
}
/* ── Collapsed info grid (on scroll) ── */
.ot-info-grid.info-collapsed {
display: flex;
flex-wrap: wrap;
align-items: center;
position: sticky;
top: 0;
z-index: 5;
background: #fff;
margin: 0;
padding: 13px 16px;
gap: 3px 0;
border-radius: 6px;
border: none;
border-bottom: 1px solid #e9ecef;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
cursor: pointer;
}
.ot-info-grid.info-collapsed:hover {
background: #f8fafc;
}
.ot-info-grid.info-collapsed .ot-info-item {
flex-direction: row;
align-items: center;
padding: 0;
border: none !important;
min-width: 0;
flex-shrink: 1;
}
.ot-info-grid.info-collapsed .ot-info-label {
display: none;
}
/* Order type badge (first item) */
.ot-info-grid.info-collapsed .ot-info-item:first-child {
flex-shrink: 0;
}
.ot-info-grid.info-collapsed .ot-info-item:first-child .ot-info-value {
font-size: 0.7rem;
font-weight: 600;
color: #3b82f6;
background: #eff6ff;
padding: 2px 9px;
border-radius: 4px;
letter-spacing: 0.01em;
}
/* Other values */
.ot-info-grid.info-collapsed .ot-info-value {
font-size: 0.78rem;
font-weight: 500;
color: #334155;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
/* Dot separator between collapsed items */
.ot-info-grid.info-collapsed .ot-info-item + .ot-info-item::before {
content: '\00B7';
margin: 0 7px;
color: #cbd5e1;
font-weight: 700;
font-size: 0.9rem;
flex-shrink: 0;
}
/* Force display mode in collapsed state */
.ot-info-grid.info-collapsed .ot-editable .ot-info-display {
display: inline !important;
}
.ot-info-grid.info-collapsed .ot-editable .ot-edit-controls {
display: none !important;
}
.ot-info-grid.info-collapsed .ot-info-edit-link {
display: none;
}
/* Hide empty/placeholder items in collapsed bar */
.ot-info-grid.info-collapsed .ot-info-item.info-hidden {
display: none;
}
/* Discount row - show/hide dynamically */
.ot-totals-row--discount {
color: #dc3545;
}
.ot-totals-row--discount .ot-totals-label {
color: #dc3545;
}
.ot-totals-row--discount .ot-totals-value input {
color: #dc3545;
}
/* Tax/Service percentage labels */
.tax-percentage-display,
.service-charge-percentage-display {
font-size: 0.72rem;
color: #94a3b8;
font-weight: 400;
}
/* Line Items */
.ot-line-items {
flex: 1;
overflow-y: auto;
padding: 0 0 8px;
}
.ot-line-items table {
display: block;
width: 100%;
border: none;
margin: 0;
}
.ot-line-items table tbody {
display: block;
width: 100%;
}
.ot-line-items tr.line-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 8px 12px;
gap: 10px;
background: #F1F5F9;
margin: 10px 19px 0px 19px;
border-radius: 6px;
}
.ot-line-items td {
display: block;
border: none;
padding: 0;
}
.ot-line-item-edit {
width: 36px;
height: 36px;
min-width: 36px;
position: relative;
border: 1px solid #e2e8f0;
border-radius: 6px;
color: #64748b;
cursor: pointer;
flex-shrink: 0;
background: #fff;
transition: all 0.15s;
}
.ot-line-item-edit a {
color: #010101;
text-decoration: none;
}
.ot-line-item-edit:hover {
border-color: #3b82f6;
color: #3b82f6;
}
.ot-line-item-num {
font-size: 0.75rem;
color: #94a3b8;
min-width: 18px;
}
.ot-line-item-details {
flex: 1;
display: flex;
flex-direction: column;
min-width: 0;
gap: 1px;
}
.ot-line-item-name {
display: block;
font-size: 12px;
font-weight: 600;
color: #1e293b;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ot-line-item-price {
font-size: 12px;
font-weight: 600;
color: #1E293B;
display: block;
}
.ot-line-item-notes {
font-size: 0.72rem;
color: #d62929;
}
.ot-line-item-modifiers {
font-size: 0.72rem;
color: #d62929;
}
.ot-line-item-modifiers ul {
margin: 2px 0;
padding-left: 16px;
}
.ot-line-item-discount {
font-size: 0.72rem;
color: #d62929;
}
.ot-line-item-qty {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.ot-line-item-qty .bootstrap-touchspin {
display: flex;
align-items: center;
gap: 4px;
}
.ot-line-item-qty .bootstrap-touchspin .input-group-btn,
.ot-line-item-qty .bootstrap-touchspin .input-group-prepend,
.ot-line-item-qty .bootstrap-touchspin .input-group-append {
display: flex;
}
.ot-line-item-qty .bootstrap-touchspin .btn {
width: 32px !important;
height: 32px !important;
min-width: 32px;
border: 1px solid #d1d5db !important;
background: #fff !important;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 1.2rem;
font-weight: 600;
color: #374151;
padding: 0 !important;
transition: all 0.15s;
border-radius: 50% !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ot-line-item-qty .bootstrap-touchspin .btn:hover {
border-color: #94a3b8 !important;
color: black !important;
}
.ot-line-item-qty input,
.ot-line-item-qty input.form-control {
width: 36px !important;
height: 36px !important;
min-height: unset;
text-align: center;
border: none;
border-radius: 8px !important;
font-size: 0.85rem;
font-weight: 600;
padding: 0 !important;
line-height: 36px;
background: #f1f5f9;
}
.ot-line-item-total {
display: none;
}
.ot-line-item-total input.line-item-net-total-formatted {
display: none;
}
.ot-line-item-delete {
width: 36px;
height: 36px;
min-width: 36px;
position: relative;
border: none;
background: #dc3545;
color: #fff;
cursor: pointer;
flex-shrink: 0;
border-radius: 6px;
transition: all 0.15s;
}
.ot-line-item-delete a {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
border-radius: 6px;
}
.ot-line-item-delete:hover {
background: #b91c1c;
}
/* Totals Section */
.ot-totals {
padding: 12px 16px;
}
.ot-totals-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 3px 0;
}
.ot-totals-row.total {
font-weight: 700;
font-size: 0.95rem;
border-top: 1px solid #dee2e6;
padding-top: 8px;
margin-top: 4px;
}
.ot-totals-label {
font-size: 12px;
color: #64748B;
font-weight: normal !important;
}
.ot-totals-value {
font-size: 12px;
color: #64748B;
text-align: right;
display: flex;
align-items: center;
gap: 6px;
}
.ot-totals-value input {
text-align: right;
border: none;
background: transparent;
font-size: 13px;
color: #1e293b;
width: 90px;
padding: 0;
}
.ot-totals-row.total .ot-totals-label,
.ot-totals-row.total .ot-totals-value,
.ot-totals-row.total .ot-totals-value input {
font-weight: 700;
font-size: 0.95rem;
}
.ot-totals-edit {
color: #64748b;
font-size: 0.78rem;
cursor: pointer;
}
.ot-totals-edit:hover {
color: #3b82f6;
}
/* Action Buttons */
.ot-actions {
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.ot-action-icons {
display: flex;
flex-direction: row;
gap: 8px;
width: 100%;
margin-bottom: 4px;
}
.ot-action-icons .ot-action-icon-btn {
flex: 1;
justify-content: center;
}
.ot-action-icon-btn {
transition: all 0.15s;
text-decoration: none;
}
.ot-btn-primary {
width: 100%;
padding: 15px 16px;
background: #1e293b;
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: background 0.15s;
}
.ot-btn-primary:hover {
background: #0f172a;
color: #fff;
}
.ot-btn-outline {
width: 100%;
padding: 15px 16px;
background: #fff;
color: #1e293b;
border: 1.5px solid #1e293b;
border-radius: 8px;
font-size: 0.88rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ot-btn-outline:hover {
background: #f8fafc;
}
.ot-btn-link {
background: none;
border: none;
color: #64748b;
font-size: 0.82rem;
cursor: pointer;
text-align: center;
padding: 4px;
text-decoration: underline;
width: 100%;
}
.ot-btn-link:hover {
color: #1e293b;
}
/* Outstanding credits row */
.ot-credits-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 4px 0;
font-size: 0.78rem;
color: #64748b;
}
/* Adjustment hidden row */
.ot-adjustment-row {
display: none;
}
.card .card-title {
letter-spacing: 0;
}
.select2-container--bootstrap4 .select2-selection--single {
height: calc(1.9em + .75rem + 2px) !important;
}
span.close {
font-size: 1.5rem !important;
}
.navigation{
font-size: .85em;
}
/* ===== Responsive Typography & Spacing Scale ===== */
:root {
--fs-page-title: 20px;
--fs-body: 1rem;
--fs-small: 0.88rem;
--fs-card-title: 1.1rem;
--spacing-content: 1rem 2rem;
--spacing-card: 1.25rem;
}
@media (max-width: 991.98px) {
:root {
--fs-page-title: 18px;
--fs-body: 0.95rem;
--fs-small: 0.84rem;
--fs-card-title: 1rem;
--spacing-content: 0.75rem 1.2rem;
--spacing-card: 1rem;
}
}
@media (max-width: 767.98px) {
:root {
--fs-page-title: 16px;
--fs-body: 0.9rem;
--fs-small: 0.8rem;
--fs-card-title: 0.95rem;
--spacing-content: 0.5rem 0.75rem;
--spacing-card: 0.85rem;
}
}
@media (max-width: 575.98px) {
:root {
--fs-page-title: 15px;
--fs-body: 0.88rem;
--fs-small: 0.78rem;
--fs-card-title: 0.9rem;
--spacing-content: 0.4rem 0.5rem;
--spacing-card: 0.75rem;
}
}
/* ===== Responsive Navbar — Tablet (768-991px) ===== */
@media (max-width: 991.98px) {
.header-navbar .navbar-header {
height: 4.5rem;
}
a.app-org-change {
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.header-navbar .navbar-container ul.nav li a.nav-link-label {
padding-left: 0.4rem;
padding-right: 0.4rem;
}
#searchbox {
width: 30% !important;
}
.app-content {
margin: 8px 12px;
overflow-x: hidden;
}
}
/* ===== Responsive Navbar & Content — Phone (<768px) ===== */
@media (max-width: 767.98px) {
html body .content .content-wrapper {
padding: 0.5rem 0.75rem;
}
.app-content {
margin: 5px 8px !important;
}
.card {
margin-bottom: 0.75rem;
}
.card .card-header {
padding: 0.75rem;
}
.card .card-body {
padding: 0.75rem;
}
div.dt-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.counter-page-header__row {
padding: 0.5rem 0.75rem;
gap: 0.5rem;
}
.counter-page-header__right {
width: 100%;
justify-content: flex-end;
}
.counter-page-header__right .btn-counter-action {
padding: 0.4rem 0.75rem;
font-size: 0.8rem;
}
.counter-page-header__filters {
padding: 0.3rem 0.75rem 0.5rem;
gap: 0.4rem;
}
}
/* ===== Responsive — Small Phone (<576px) ===== */
@media (max-width: 575.98px) {
.app-content {
margin: 3px 5px !important;
}
.header-navbar .navbar-container ul.nav.float-right {
gap: 0;
}
.header-navbar .navbar-container ul.nav li a.nav-link-label {
padding: 1.8rem 0.2rem 1.4rem;
font-size: 0.85rem;
}
.modal-right-25 {
width: 100% !important;
min-width: 0 !important;
}
.modal-right-60 {
min-width: 0 !important;
}
.card .card-header {
padding: 0.6rem;
}
.card .card-body {
padding: 0.6rem;
}
}
/* ==========================================================================
Cross-document View Transitions
--------------------------------------------------------------------------
Opt the app into the MPA View Transitions API so navigation between
server-rendered pages crossfades instead of hard-reloading. Supported
in Chromium 126+ (Chrome/Edge Jun 2024), Safari 18, Opera. Browsers
without support fall through to the normal navigation path — no JS
required, no polyfill shipped.
Combined with the cookie-based data-theme pre-render and the
/api/dashboard/status batching, the effect is: click a sidebar item,
old page fades out, new page fades in, no white flash, same theme
throughout.
Duration is deliberately fast (160ms) — longer feels laggy on a POS
app where operators click 50+ times per shift. Cubic-bezier close to
"ease-out" so the exit is snappier than the enter.
========================================================================== */
@view-transition {
navigation: auto;
}
::view-transition-old(root) {
animation: fops-fade-out 120ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
::view-transition-new(root) {
animation: fops-fade-in 160ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes fops-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes fops-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Respect the user's motion preference. Skips the animation entirely and
lets the browser do a default instant swap. */
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
/* ─────────────────────────────────────────────────────────────
Shared counter-page transitions
Used by Orders/Index, Delivery/Index, Takeouts/Index
───────────────────────────────────────────────────────────── */
#order-all-tab {
transition: opacity 80ms ease;
}
#order-all-tab.is-switching { opacity: 0.35; }
/* New card entrance animation (SignalR OrderAdded) */
.order-card-enter {
opacity: 0;
transform: translateY(-6px) scale(0.98);
}
.order-card-enter-active {
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Counter filter badge pulse when its value changes */
@keyframes counter-badge-pulse {
0% { transform: scale(1); }
40% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.counter-filter-badge.is-pulsing {
animation: counter-badge-pulse 360ms ease;
}
/* Dropdowns share a consistent fade in/out via jQuery fadeToggle */
#sortDropdownMenu,
#layoutDropdownMenu {
transform-origin: top right;
}
/* Smoother status-badge change when card innards are replaced */
#order-all-tab [id^="order-details-"] {
transition: opacity 180ms ease;
}
#order-all-tab [id^="order-details-"].is-updating { opacity: 0.55; }
/* ─────────────────────────────────────────────────────────────
Tables/Index action transitions (floor plan + order panel)
───────────────────────────────────────────────────────────── */
/* Right-side panel crossfade on AJAX swap */
#right-side-panel {
transition: opacity 160ms ease;
}
#right-side-panel.is-swapping { opacity: 0.35; }
/* Floor plan canvas crossfade on floor switch */
#floorCanvas {
transition: opacity 180ms ease;
}
#floorCanvas.is-switching { opacity: 0; }
/* Order card staggered entrance when panel content is rendered */
.order-card.tlx-enter {
opacity: 0;
transform: translateY(6px) scale(0.99);
}
.order-card.tlx-enter-active {
opacity: 1;
transform: translateY(0) scale(1);
transition: opacity 280ms ease, transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Press feedback for order-card action buttons & icons */
.order-card-primary-btn,
.order-card-action-icon,
.counter-filter-pill,
#btnZoomIn,
#btnZoomOut,
#btnResetView,
#btnPanMode {
transition: transform 120ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.order-card-primary-btn.is-pressed,
.order-card-action-icon.is-pressed,
#btnZoomIn.is-pressed,
#btnZoomOut.is-pressed,
#btnResetView.is-pressed,
#btnPanMode.is-pressed {
transform: scale(0.94);
}
.order-card-action-icon:hover {
transform: translateY(-1px);
}
.order-card-primary-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 10px -4px rgba(0,0,0,0.18);
}
/* Smooth status pill recolor when order state changes */
.order-card__status-pill,
.order-card__status-dot {
transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}
/* Floor-plan empty state fades in/out */
.table-panel-empty {
transition: opacity 200ms ease, transform 200ms ease;
}
/* Respect users who want reduced motion */
@media (prefers-reduced-motion: reduce) {
#right-side-panel,
#floorCanvas,
.order-card.tlx-enter,
.order-card.tlx-enter-active,
.order-card-primary-btn,
.order-card-action-icon,
.counter-filter-pill,
.order-card__status-pill,
.order-card__status-dot,
.table-panel-empty,
#btnZoomIn, #btnZoomOut, #btnResetView, #btnPanMode {
transition: none !important;
animation: none !important;
transform: none !important;
}
.order-card.tlx-enter { opacity: 1 !important; }
}