:root{
  --color-navy-900:#14213d;
  --color-navy-800:#16265c;
  --color-blue-600:#2f6fb3;
  --color-blue-500:#2d67b2;
  --color-blue-400:#5da9e9;
  --color-blue-300:#2d89ef;
  --color-blue-100:#c8ddf6;
  --color-blue-50:#e3f2fd;
  --color-gray-50:#f7fafc;
  --color-gray-100:#edf2f7;
  --color-gray-200:#e5edf5;
  --color-gray-300:#d9e4f2;
  --color-gray-400:#667085;
  --color-gray-500:#475467;
  --color-gray-600:#374151;
  --color-gray-900:#14213d;
  --color-success:#14213d;
  --color-success-bg:#e3f2fd;
  --color-warning:#2f6fb3;
  --color-warning-bg:#e3f2fd;
  --color-danger:#c62828;
  --color-danger-bg:#fce8e8;
  --color-info:#1565c0;
  --color-info-bg:#e3f2fd;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:18px;
  --shadow-sm:0 1px 3px rgba(20,
 33,
 61,
 0.08);
  --shadow-md:0 4px 12px rgba(20,
 33,
 61,
 0.1);
  --shadow-lg:0 8px 24px rgba(20,
 33,
 61,
 0.12)}
body{
  background:var(--color-gray-100)!important;
  color:var(--color-gray-500)!important;
  font-family:Roboto,
sans-serif!important}
.wrapper{
  position:relative;
  min-height:100vh}
a{
  color:var(--color-blue-600)!important;
  text-decoration:none!important}
a:focus,
a:hover{
  color:var(--color-blue-400)!important;
  outline:0!important}
hr{
  margin-top:20px;
  margin-bottom:20px;
  border:0;
  border-top:1px solid var(--color-gray-200)!important}
code{
  padding:2px 4px;
  font-size:90%;
  color:var(--color-blue-600)!important;
  background-color:var(--color-gray-50)!important;
  border-radius:3px}
pre{
  font-size:90%;
  color:var(--color-gray-500)!important;
  background-color:var(--color-gray-50)!important;
  border-radius:3px;
  border:none}
.container-center{
  max-width:400px;
  margin:10% auto 0;
  padding:20px}
.container-center.sm{
  max-width:200px}
.container-center.md{
  max-width:600px}
.container-center.lg{
  max-width:800px}
.navigation{
  background:linear-gradient(180deg,#fafbfc 0%,#eef1f5 100%)!important;
  width:240px;
  position:fixed;
  left:0;
  bottom:0;
  top:56px;
  transition:left .3s cubic-bezier(.4,
 0,
  .2,
  1),
 transform .3s cubic-bezier(.4,
 0,
  .2,
  1);
  -webkit-transition:left .3s cubic-bezier(.4,
 0,
  .2,
  1),
 transform .3s cubic-bezier(.4,
 0,
  .2,
  1);
  z-index:100;
  overflow-y:auto;
  overflow-x:hidden;
  border-right:1px solid var(--color-gray-200)!important;
  box-shadow:none!important}
.navigation::after{
  display:none!important}
.box-content .row+.row{
  margin-top:15px}
.navigation nav{
  background-color:transparent!important}
.luna-nav.nav{
  padding-top:0}
.luna-nav.nav .nav-category,
.luna-nav.nav li>a{
  font-size:14px!important;
  padding:10px 16px!important;
  gap:10px;
  transition:all .2s ease}
.luna-nav.nav li>a .nav-icon{
  font-size:16px!important;
  width:24px;
  text-align:center;
  margin-right:4px}
.luna-nav.nav>li+li{
  border-top:1px solid var(--color-gray-100)}
.luna-nav.nav>li:first-child{
  border-top:none}
.luna-nav.nav .nav-info{
  margin-top:50px}
.luna-nav.nav .nav-info i{
  font-size:34px}
.luna-nav.nav .nav-second li>a{
  padding-left:40px!important;
  font-size:13px!important}
.luna-nav.nav li.active .nav-second li>a{
  padding-left:40px!important}
.luna-nav.nav li.active .nav-second li.active a{
  padding-left:40px!important}
.luna-nav.nav li.active .nav-second li.active>a{
  padding-left:40px!important}
.luna-nav.nav li.active .nav-second li.active>a{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  font-weight:600!important;
  border-left:3px solid var(--color-blue-400)!important;
  position:relative}
.luna-nav.nav li.active .nav-second li.active>a:before{
  content:'';
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--color-blue-600)}
.luna-nav.nav li.active .nav-second li:not(:last-child){
  position:relative}
.luna-nav.nav li.active .nav-second li:not(:last-child)::after{
  content:'';
  position:absolute;
  left:22px;
  top:100%;
  width:1px;
  height:12px;
  background:var(--color-gray-200)}
.luna-nav.nav .sub-nav-icon{
  float:right}
.luna-nav.nav>li>a:hover{
  background:var(--color-gray-50)!important}
.navbar{
  min-height:56px}
.navbar-fixed-top{
  position:fixed!important;
  top:0!important;
  z-index:1030!important}
.navbar-header{
  display:flex!important;
  align-items:center!important;
  flex-shrink:0}
.sidebar-toggle-btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  padding:4px 6px!important;
  margin:0 2px 0 8px!important;
  border:none!important;
  border-radius:4px!important;
  background:0 0!important;
  color:var(--color-gray-400)!important;
  font-size:23px!important;
  cursor:pointer!important;
  transition:background .15s ease,
color .15s ease!important;
  outline:0!important;
  opacity:.7!important}
.sidebar-toggle-btn:hover{
  opacity:1!important}
.sidebar-toggle-btn:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  opacity:1!important}
.sidebar-toggle-btn:active{
  background:var(--color-gray-100)!important}
.sidebar-toggle-btn i{
  pointer-events:none!important}
body.nav-toggle .sidebar-toggle-btn{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  opacity:1!important}
.navbar-brand{
  padding:10px 0 10px 0}
.navbar-default{
  background:#ffffff!important;
  border-bottom:1px solid var(--color-gray-200)!important;
  box-shadow:0 1px 3px rgba(20,33,61,0.05)!important;
  position:relative;
  overflow:visible!important}
.navbar-default::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--color-blue-600);
  border-radius:0 2px 2px 0;
  z-index:2}
.navbar-brand-stripe{
  display:none}
.navbar-brand-stripe .stripe-segment{
  height:100%}
.navbar-brand-stripe .stripe-navy{
  width:54%;
  background:#16265c}
.navbar-brand-stripe .stripe-blue{
  width:16%;
  background:#2f6fb3}
.navbar-brand-stripe .stripe-light-blue{
  width:15%;
  background:#5da9e9}
.navbar-brand-stripe .stripe-bright-blue{
  width:15%;
  background:#2d89ef}
.navbar>.container-fluid{
  position:relative;
  z-index:1}
.navbar-nav.navbar-right>li>a{
  color:#fff!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:40px!important;
  height:40px!important;
  border-radius:8px!important;
  transition:color .15s ease!important;
  margin-right:4px!important}
.navbar-nav.navbar-right>li>a:hover{
  color:var(--color-blue-600)!important}
.navbar-nav.navbar-right>li.notification-link>a>i{
  font-size:18px!important}
.navbar-nav.navbar-right>li.profil-link>a{
  color:#fff!important;
  width:auto!important;
  min-width:auto!important;
  padding:6px 10px!important}
.navbar-store-info .store-name-link{
  color:var(--color-navy-900)!important;
  max-width:200px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:default;
  font-weight:500;
  position:relative}
.navbar-store-info .store-name-link:hover::after{
  content:attr(data-full-name);
  position:absolute;
  top:100%;
  left:0;
  background:var(--color-navy-900);
  color:#fff;
  padding:4px 10px;
  border-radius:4px;
  font-size:12px;
  white-space:nowrap;
  z-index:1000;
  box-shadow:var(--shadow-md);
  margin-top:4px}
#version-info{
  color:var(--color-gray-400)!important;
  font-size:11px!important;
  font-weight:500!important}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
  color:var(--color-navy-900)!important}
.sidebar-toggle-btn{
  color:var(--color-navy-900,
#14213d)!important}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus{
  width:200px}
.navbar-brand{
  padding:10px 1px}
.navbar-brand span{
  letter-spacing:normal}
.navbar-store-info{
  display:flex!important;
  align-items:center!important;
  padding:0 16px!important;
  margin-right:auto!important}
.navbar-nav>li>a{
  display:flex!important;
  align-items:center!important;
  height:56px!important;
  padding:0 15px!important}
.navbar-nav>li:first-child>a{
  padding-left:0}
.navbar-nav>li:last-child>a{
  padding:10px 25px 10px 15px}
.navbar-nav.navbar-right a .label{
  margin:-5px 0 0 5px}
.navbar-right{
  float:none!important}
.navbar-nav.navbar-right{
  display:flex!important;
  flex-wrap:nowrap!important;
  flex-direction:row!important;
  align-items:center!important}
.profil-link{
  position:relative;
  margin-left:12px;
  display:flex!important;
  align-items:center;
  gap:8px}
.profil-link>a{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  padding:6px 10px!important;
  border-radius:8px!important;
  transition:background .15s ease!important}
.profil-link>a:hover{
  background:var(--color-gray-100)!important}
.profil-link img{
  height:32px!important;
  width:32px!important;
  border:2px solid var(--color-gray-200)!important;
  border-radius:50%!important;
  object-fit:cover!important;
  transition:border-color .2s ease}
.profil-link:hover img{
  border-color:var(--color-blue-400)!important}
/* User avatar circle (initials-based, replaces static profile_pic.png) */
.user-avatar-circle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,var(--color-blue-600),var(--color-navy-900))!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:600!important;
  line-height:1!important;
  text-transform:uppercase!important;
  border:2px solid var(--color-gray-200)!important;
  transition:border-color .2s ease,box-shadow .2s ease}
.profil-link:hover .user-avatar-circle{
  border-color:var(--color-blue-400)!important;
  box-shadow:0 0 0 3px rgba(45,103,178,.15)!important}
.user-avatar-circle i{
  font-size:14px!important}
.profil-link .profile-address{
  text-transform:capitalize;
  font-weight:500;
  font-size:13px;
  color:var(--color-navy-900)!important;
  white-space:nowrap!important}
.user-dropdown{
  display:none;
  position:absolute;
  top:100%;
  right:0;
  min-width:160px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(20,33,61,0.12);
  border:1px solid var(--color-gray-200);
  padding:8px;
  z-index:2000;
  margin-top:4px}
.user-dropdown.show{
  display:block}
.user-dropdown a{
  display:block;
  padding:10px 16px;
  color:var(--color-navy-900)!important;
  border-radius:8px;
  transition:background .2s ease,
 color .2s ease;
  font-size:14px;
  font-weight:500}
.user-dropdown a:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
.user-dropdown a i{
  margin-right:8px;
  width:16px;
  text-align:center}
.user-dropdown .dropdown-divider{
  height:1px;
  background:var(--color-gray-100);
  margin:6px 0}
#mobile-menu{
  display:none}
@media (max-width:991px){
  #mobile-menu{
  display:block}
#navbar>.left-nav-toggle{
  display:none}
}
@media (min-width:992px){
  #mobile-menu{
  display:none}
}
.pagination>li>a,
.pagination>li>span{
  color:var(--color-gray-500)!important}
.badge{
  background-color:transparent!important}
.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th{
  border-top:1px solid var(--color-gray-200)!important}
.table>thead>tr>th{
  border-bottom:none}
.table-striped>tbody>tr:nth-of-type(odd){
  background-color:var(--color-gray-50)!important}
.table>tbody>tr.active>td,
.table>tbody>tr.active>th,
.table>tbody>tr>td.active,
.table>tbody>tr>th.active,
.table>tfoot>tr.active>td,
.table>tfoot>tr.active>th,
.table>tfoot>tr>td.active,
.table>tfoot>tr>th.active,
.table>thead>tr.active>td,
.table>thead>tr.active>th,
.table>thead>tr>td.active,
.table>thead>tr>th.active{
  background-color:var(--color-gray-100)!important}
.table-hover>tbody>tr:hover{
  background-color:var(--color-blue-50)!important}
.table-bordered,
.table-bordered>tbody>tr>td,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>td,
.table-bordered>tfoot>tr>th,
.table-bordered>thead>tr>td,
.table-bordered>thead>tr>th{
  border-color:var(--color-gray-200)!important}
.table>tbody>tr.success>td,
.table>tbody>tr.success>th,
.table>tbody>tr>td.success,
.table>tbody>tr>th.success,
.table>tfoot>tr.success>td,
.table>tfoot>tr.success>th,
.table>tfoot>tr>td.success,
.table>tfoot>tr>th.success,
.table>thead>tr.success>td,
.table>thead>tr.success>th,
.table>thead>tr>td.success,
.table>thead>tr>th.success{
  background-color:var(--color-success-bg)!important}
.table-hover>tbody>tr.success:hover>td,
.table-hover>tbody>tr.success:hover>th,
.table-hover>tbody>tr:hover>.success,
.table-hover>tbody>tr>td.success:hover,
.table-hover>tbody>tr>th.success:hover{
  background-color:var(--color-success)!important}
.table>tbody>tr.info>td,
.table>tbody>tr.info>th,
.table>tbody>tr>td.info,
.table>tbody>tr>th.info,
.table>tfoot>tr.info>td,
.table>tfoot>tr.info>th,
.table>tfoot>tr>td.info,
.table>tfoot>tr>th.info,
.table>thead>tr.info>td,
.table>thead>tr.info>th,
.table>thead>tr>td.info,
.table>thead>tr>th.info{
  background-color:var(--color-info-bg)!important}
.table-hover>tbody>tr.info:hover>td,
.table-hover>tbody>tr.info:hover>th,
.table-hover>tbody>tr:hover>.info,
.table-hover>tbody>tr>td.info:hover,
.table-hover>tbody>tr>th.info:hover{
  background-color:var(--color-info)!important}
.table>tbody>tr.warning>td,
.table>tbody>tr.warning>th,
.table>tbody>tr>td.warning,
.table>tbody>tr>th.warning,
.table>tfoot>tr.warning>td,
.table>tfoot>tr.warning>th,
.table>tfoot>tr>td.warning,
.table>tfoot>tr>th.warning,
.table>thead>tr.warning>td,
.table>thead>tr.warning>th,
.table>thead>tr>td.warning,
.table>thead>tr>th.warning{
  background-color:var(--color-warning-bg)!important}
.table-hover>tbody>tr.warning:hover>td,
.table-hover>tbody>tr.warning:hover>th,
.table-hover>tbody>tr:hover>.warning,
.table-hover>tbody>tr>td.warning:hover,
.table-hover>tbody>tr>th.warning:hover{
  background-color:var(--color-warning)!important}
.table>tbody>tr.danger>td,
.table>tbody>tr.danger>th,
.table>tbody>tr>td.danger,
.table>tbody>tr>th.danger,
.table>tfoot>tr.danger>td,
.table>tfoot>tr.danger>th,
.table>tfoot>tr>td.danger,
.table>tfoot>tr>th.danger,
.table>thead>tr.danger>td,
.table>thead>tr.danger>th,
.table>thead>tr>td.danger,
.table>thead>tr>th.danger{
  background-color:var(--color-danger-bg)!important}
.table-hover>tbody>tr.danger:hover>td,
.table-hover>tbody>tr.danger:hover>th,
.table-hover>tbody>tr:hover>.danger,
.table-hover>tbody>tr>td.danger:hover,
.table-hover>tbody>tr>th.danger:hover{
  background-color:var(--color-danger)!important}
.table-responsive{
  border-color:var(--color-gray-200)!important}
.alert-success{
  color:#0f5132!important}
.alert-success .alert-link{
  color:var(--color-success)!important}
.alert-warning{
  color:#664d03!important}
.alert-warning .alert-link{
  color:var(--color-warning)!important}
.alert-info{
  color:#055160!important}
.alert-info .alert-link{
  color:var(--color-info)!important}
.alert-danger{
  color:#842029!important}
.alert-danger .alert-link{
  color:var(--color-danger)!important}
.toast-success{
  color:#fff!important}
.toast-warning{
  color:#fff!important}
.toast-info{
  color:#fff!important}
.toast-error{
  color:#fff!important}
.form-control{
  color:var(--color-gray-500)!important}
.form-control:focus{
  -webkit-box-shadow:none!important;
  box-shadow:none!important}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control{
  background-color:var(--color-gray-100)!important}
.tab-pane .panel-body{
  border-top:none}
.tabs-below>.nav-tabs,
.tabs-left>.nav-tabs,
.tabs-right>.nav-tabs{
  border-bottom:0}
.tabs-left .panel-body{
  position:static;
  width:80%}
.tabs-right .panel-body{
  width:80%}
.pill-content>.pill-pane,
.tab-content>.tab-pane{
  display:none}
.pill-content>.active,
.tab-content>.active{
  display:block}
.tabs-below>.nav-tabs>li{
  margin-bottom:0}
.tabs-left>.nav-tabs>li,
.tabs-right>.nav-tabs>li{
  float:none}
.tabs-left>.nav-tabs>li>a,
.tabs-right>.nav-tabs>li>a{
  margin-right:0}
.tabs-left>.nav-tabs{
  float:left}
.tabs-right>.nav-tabs{
  float:right}
.panel.panel-c-white{
  border-left:3px solid var(--color-gray-400)!important}
.panel.panel-c-accent{
  border-left:3px solid var(--color-blue-400)!important}
.panel.panel-c-primary{
  border-left:3px solid var(--color-blue-600)!important}
.panel.panel-c-warning{
  border-left:3px solid var(--color-warning)!important}
.panel.panel-c-info{
  border-left:3px solid var(--color-info)!important}
.panel.panel-c-success{
  border-left:3px solid var(--color-success)!important}
.panel.panel-c-danger{
  border-left:3px solid var(--color-danger)!important}
.panel.panel-b-accent{
  background-color:var(--color-blue-400)!important;
  color:#fff!important}
.panel.panel-b-white{
  background-color:#fff!important}
.panel.panel-b-white .panel-heading{
  color:var(--color-gray-500)!important}
.panel.panel-b-white .panel-footer{
  color:var(--color-gray-500)!important}
.panel.collapsed .fa.fa-chevron-up:before{
  content:"\f078"}
.panel.collapsed .fa.fa-chevron-down:before{
  content:"\f077"}
.support-question.active .panel-body{
  padding-left:13px}
.ui-sortable .panel-body{
  cursor:move}
.pace{
  -webkit-pointer-events:none;
  pointer-events:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none}
.pace-inactive{
  display:none!important}
.pace .pace-progress{
  background:var(--color-blue-600)!important;
  position:fixed;
  z-index:2000;
  top:0;
  right:100%;
  width:100%;
  height:3px}
.pace .pace-progress-inner{
  box-shadow:0 0 10px var(--color-blue-600),
0 0 5px var(--color-blue-600)!important}
.content>div{
  opacity:1!important}
.content{
  margin-top:56px;
  margin-left:240px;
  background:var(--color-gray-100)!important;
  min-height:calc(100vh - 56px);
  padding:0!important;
  transition:margin-left .3s cubic-bezier(.4,
 0,
 .2,
 1);
  box-shadow:inset 0 1px 3px rgba(20,
33,
61,
.04)!important}
.content>.container-fluid{
  padding:0!important}
.content>.container-fluid>.row{
  margin-left:-10px!important;
  margin-right:-10px!important}
.content>.container-fluid>.row>[class*=col-]{
  padding-left:0!important;
  padding-right:0!important}
.content>.container-fluid>.row>[class*=col-]>.row{
  margin-left:0!important;
  margin-right:0!important}
.content>.container-fluid>.row>[class*=col-]>.row>[class*=col-]{
  padding-left:0!important;
  padding-right:0!important}
@media (min-width:992px){
  body.nav-toggle .content{
  margin-left:0!important}
body.nav-toggle .navigation{
  left:-240px!important}
}
body.blank .content{
  margin-left:0;
  margin-top:0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  background:var(--color-gray-100)!important;
  padding:20px}
body.blank .container-center{
  margin:0 auto;
  max-width:420px;
  width:100%}
.content .panel-tools{
  display:inline-block!important}
@media (max-width:767px){
  .content{
  margin-left:0;
  padding:0}
}
.navbar-default{
  background:linear-gradient(90deg,
 #fff 0%,
 #fff 25%,
 var(--color-blue-600,
 #2f6fb3) 65%,
 var(--color-navy-900,
 #14213d) 100%)!important;
  border-top:2px solid #2d67b2!important;
  border-bottom:1px solid #d1d9e6!important;
  box-shadow:0 2px 6px rgba(0,
0,
0,
.1)!important;
  margin-left:0!important;
  height:56px}
.navbar>.container-fluid{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
  height:52px;
  padding-right:20px!important}
.navbar-default .navbar-header{
  display:flex;
  align-items:center;
  width:auto;
  min-width:auto;
  height:56px;
  padding:0 10px 0 0}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
  color:#fff!important;
  width:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  height:56px}
.navbar-default .navbar-brand img{
  max-height:44px}
.navbar-default .navbar-nav>li>a{
  color:#fff!important}
@media (min-width:992px){
  .navbar-collapse{
  width:auto!important;
  clear:none!important;
  border:none!important;
  box-shadow:none!important;
  display:flex!important;
  align-items:center!important;
  flex:1!important;
  padding-left:0!important;
  padding-right:0!important}
.navbar-collapse.collapse{
  display:flex!important;
  visibility:visible!important;
  height:auto!important;
  min-height:0!important;
  padding-bottom:0!important;
  flex:1!important}
.navbar-collapse,
.navbar-collapse.collapse{
  align-items:center!important}
.navbar-form{
  display:flex!important;
  align-items:center!important;
  float:none!important;
  margin:0!important;
  padding:0 16px!important;
  border:none!important;
  flex:1!important}
.navbar-nav{
  display:flex!important;
  align-items:center!important;
  margin:0!important;
  flex-wrap:nowrap!important}
.navbar-nav.navbar-right{
  margin-left:auto!important;
  float:none!important}
.navbar-nav>li{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important}
.navbar-nav>li>a{
  display:flex!important;
  align-items:center!important;
  height:56px!important}
.navbar-nav.navbar-right>li.profil-link{
  flex-direction:row!important;
  align-items:center!important}
}
.navbar-nav.navbar-right>li{
  flex-shrink:0!important;
  flex-direction:row!important;
  align-items:center!important}
.navbar-store-info{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap}
.navbar-store-info .store-name-link{
  color:var(--color-navy-900)!important;
  font-weight:600!important;
  font-size:15px!important;
  text-decoration:none!important}
.navbar-store-info .store-name-link:hover{
  color:var(--color-blue-600)!important}
#version-info{
  display:inline-block!important;
  background:#e8edf5!important;
  color:#8a96a8!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.5px!important;
  padding:3px 10px!important;
  border-radius:20px!important;
  vertical-align:middle!important;
  text-transform:uppercase!important;
  border:1px solid #c8d4e4!important}
.profil-link{
  display:flex!important;
  align-items:center!important;
  gap:4px!important;
  list-style:none!important;
  flex-direction:row!important}
.profil-link>a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  padding:0 12px!important;
  height:56px!important;
  line-height:56px!important;
  border-radius:var(--radius-md)!important;
  transition:background .15s ease!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  max-width:200px!important}
.profil-link>a:hover{
  background:rgba(255,255,255,0.1)!important;
  border-radius:8px!important}
.profil-link .profile-address{
  color:#fff!important;
  font-weight:500!important;
  font-size:13px!important;
  display:inline-flex!important;
  align-items:center!important;
  line-height:56px!important;
  vertical-align:middle!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  max-width:120px!important}
.profil-link > a{
  color:#fff!important}
.profil-link > a:hover{
  color:var(--color-blue-400)!important}
.profil-link img{
  height:32px!important;
  width:32px!important;
  border-radius:50%!important;
  object-fit:cover!important;
  border:2px solid #dde3ec!important;
  transition:border-color .2s ease!important;
  vertical-align:middle!important}
.profil-link>a:hover img{
  border-color:#2f6fb3!important}
.profil-link .logout-link{
  font-size:12px!important;
  color:var(--color-gray-400)!important;
  margin-right:8px!important;
  text-transform:uppercase!important;
  font-weight:500!important;
  letter-spacing:.5px!important}
.profil-link .logout-link:hover{
  color:var(--color-danger)!important}
.content .panel>.panel-heading,
.panel>.panel-heading{
  color:var(--color-navy-900)!important}
.panel-heading-icon{
  margin-right:8px!important;
  color:var(--color-blue-600)!important}
.content label,
.form-group label,
.panel label{
  color:var(--color-gray-500)!important}
.content th,
.panel th,
.table>thead>tr>th{
  color:var(--color-navy-900)!important}
.panel.panel-filled{
  background-color:#fff!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:var(--shadow-sm)!important;
  border:1px solid var(--color-gray-200)!important;
  border-left:3px solid var(--color-blue-600)!important;
  overflow:hidden;
  transition:box-shadow .2s ease}
.panel.panel-filled:hover{
  box-shadow:var(--shadow-md)!important}
.panel.panel-filled .panel-body{
  color:var(--color-gray-500)!important}
.panel-heading{
  padding:20px 24px!important;
  border-bottom:1px solid var(--color-gray-100)!important;
  font-size:16px!important;
  font-weight:600!important}
.panel-heading-icon{
  font-size:18px!important;
  margin-right:10px!important}
.panel-body{
  padding:24px!important}
.panel.panel-b-white .panel-heading{
  color:var(--color-navy-900)!important}
.panel.panel-b-white .panel-footer{
  color:var(--color-gray-500)!important}
.panel-filled .table>tbody>tr>td,
.panel-filled .table>tbody>tr>th,
.panel-filled .table>tfoot>tr>td,
.panel-filled .table>tfoot>tr>th,
.panel-filled .table>thead>tr>td,
.panel-filled .table>thead>tr>th{
  border-color:var(--color-gray-200)!important;
  color:var(--color-gray-500)!important}
.panel-filled .table-bordered,
.panel-filled .table-bordered>tbody>tr>td,
.panel-filled .table-bordered>tbody>tr>th,
.panel-filled .table-bordered>tfoot>tr>td,
.panel-filled .table-bordered>tfoot>tr>th,
.panel-filled .table-bordered>thead>tr>td,
.panel-filled .table-bordered>thead>tr>th{
  border-color:var(--color-gray-200)!important}
.panel-filled .table-striped>tbody>tr:nth-of-type(odd){
  background-color:var(--color-gray-50)!important}
.panel-filled .table-hover>tbody>tr:hover{
  background-color:var(--color-blue-50)!important}
body .content label{
  color:var(--color-gray-500)!important}
.navigation:before{
  display:none!important}
.luna-nav.nav li>a{
  color:var(--color-gray-500)!important;
  font-size:13.5px!important;
  font-weight:500!important;
  border-left:3px solid transparent!important;
  transition:all .15s ease!important}
.luna-nav.nav li a:focus,
.luna-nav.nav li a:hover{
  background:var(--color-gray-50)!important;
  color:var(--color-navy-900)!important}
.luna-nav.nav>li>a{
  border-left:3px solid transparent!important;
  transition:all .2s ease!important}
.luna-nav.nav>li>a:hover{
  background:var(--color-gray-50)!important;
  border-left-color:var(--color-gray-300)!important}
.luna-nav.nav>li.active>a{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  border-left:3px solid var(--color-blue-600)!important;
  font-weight:600!important;
  padding-left:13px!important}
.luna-nav.nav li.active .nav-second li.active>a{
  background:transparent!important;
  color:var(--color-blue-600)!important;
  font-weight:500!important}
.luna-nav.nav .nav-second li>a{
  color:var(--color-gray-500)!important;
  font-size:13px!important;
  transition:all .15s ease!important;
  padding-left:40px!important}
.luna-nav.nav li.active .nav-second li>a{
  color:var(--color-gray-500)!important}
.luna-nav.nav li.active .nav-second li a:hover{
  background:var(--color-gray-50)!important;
  color:var(--color-navy-900)!important}
.luna-nav.nav li.active .nav-second li.active a{
  color:var(--color-blue-600)!important;
  font-weight:500!important}
.luna-nav.nav li.active .nav-second li.active_submenu>a{
  background:transparent!important;
  color:var(--color-blue-600)!important;
  font-weight:500!important}
.luna-nav.nav li.active .nav-second li.active_submenu>a .fa{
  color:var(--color-blue-600)!important}
.nav-second li>a .fa{
  color:var(--color-blue-100)!important;
  font-size:8px!important;
  margin-right:8px!important}
.nav-second li.active>a .fa{
  color:var(--color-blue-600)!important}
.luna-nav.nav .nav-category{
  color:var(--color-gray-400)!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important}
.luna-nav.nav .nav-section-header{
  padding:16px 16px 6px!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.8px!important;
  color:var(--color-gray-400)!important;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:default!important;
  border-top:none!important;
  background:transparent!important}
.luna-nav.nav .nav-section-header i{
  font-size:14px;
  color:var(--color-gray-300)}
.luna-nav.nav .sub-nav-icon{
  color:var(--color-gray-300)!important;
  transition:transform .2s ease!important}
.luna-nav.nav li.active>a .sub-nav-icon{
  color:var(--color-blue-600)!important}
.nav2{
  list-style:none!important}
.nav2>li>a,
.nav>li>a{
  display:inline-block!important}
.nav2>li>a{
  position:relative!important;
  display:block!important;
  padding:10px 15px!important;
  color:var(--color-gray-400)!important;
  font-size:12.5px!important;
  text-decoration:none!important}
.nav2>li>a:hover{
  background:var(--color-gray-50)!important;
  color:var(--color-navy-900)!important;
  text-decoration:none!important}
.luna-nav.nav2 li>a{
  color:var(--color-gray-400)!important}
.luna-nav.nav2 .nav-category,
.luna-nav.nav2 li>a{
  padding:8px 15px 8px 60px!important;
  margin:0 0!important}
.luna-nav.nav .nav-second .nav2 li>a{
  padding-left:60px!important;
  font-size:12.5px!important}
a:hover{
  cursor:pointer!important}
.luna-nav.nav .nav-info{
  color:var(--color-gray-400)!important;
  margin-top:50px}
.luna-nav.nav .nav-info i{
  color:var(--color-gray-300)!important;
  font-size:24px}
.navigation .luna-nav>li>div p{
  font-size:12px!important;
  color:var(--color-gray-400)!important;
  line-height:1.6!important}
.navigation .luna-nav>li>div p a{
  color:var(--color-blue-600)!important;
  text-decoration:none!important}
.navigation textarea[name=admin_notes]{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:10px!important;
  font-size:12px!important;
  color:var(--color-gray-500)!important;
  background:#fff!important}
.navigation button[name=save_store_notes]{
  background:var(--color-blue-600)!important;
  color:#fff!important;
  border:none!important;
  border-radius:var(--radius-sm)!important;
  padding:6px 16px!important;
  font-size:12px!important;
  font-weight:500!important}
.panel{
  background-color:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-sm)!important;
  transition:box-shadow .2s ease!important;
  overflow:hidden!important;
  margin-bottom:20px!important}
.panel:hover{
  box-shadow:var(--shadow-md)!important}
.panel .panel-body{
  padding:18px!important;
  background:#fff!important}
.panel.panel-filled .panel-body{
  padding:18px!important;
  background:#fff!important}
.panel>.panel-heading{
  position:relative!important;
  background:#fff!important;
  color:var(--color-navy-900)!important;
  border-bottom:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0!important;
  padding:14px 18px!important}
.panel-heading-icon{
  color:var(--color-blue-600)!important;
  margin-right:10px!important;
  font-size:16px!important;
  opacity:.9!important}
.panel .panel-footer{
  background:var(--color-gray-50)!important;
  border-top:1px solid var(--color-gray-200)!important;
  border-radius:0 0 var(--radius-lg) var(--radius-lg)!important}
.panel-heading h1,
.panel-heading h2,
.panel-heading h3,
.panel-heading>b,
.panel-heading>strong{
  color:var(--color-navy-900)!important;
  font-weight:700!important;
  letter-spacing:-.2px!important}
.panel-tools{
  float:right!important;
  position:relative!important;
  top:-1px!important}
.panel-tools a{
  color:var(--color-gray-500)!important;
  font-size:14px!important;
  margin-left:8px!important;
  opacity:.7!important;
  transition:opacity .15s ease!important}
.panel-tools a:hover{
  color:var(--color-navy-900)!important;
  opacity:1!important}
.panel.collapsed .panel-body,
.panel.collapsed .panel-footer{
  display:none}
.panel-filled .table>tbody>tr>td,
.panel-filled .table>tbody>tr>th,
.panel-filled .table>tfoot>tr>td,
.panel-filled .table>tfoot>tr>th,
.panel-filled .table>thead>tr>td,
.panel-filled .table>thead>tr>th{
  border-color:var(--color-gray-200)!important}
.panel-filled .table-bordered,
.panel-filled .table-bordered>tbody>tr>td,
.panel-filled .table-bordered>tbody>tr>th,
.panel-filled .table-bordered>tfoot>tr>td,
.panel-filled .table-bordered>tfoot>tr>th,
.panel-filled .table-bordered>thead>tr>td,
.panel-filled .table-bordered>thead>tr>th{
  border-color:var(--color-gray-200)!important}
.table-striped>thead>tr>th{
  background:var(--color-gray-50)!important;
  border-bottom:2px solid var(--color-gray-200)!important;
  color:var(--color-navy-900)!important;
  font-size:11px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.8px!important;
  padding:14px 16px!important}
.table-striped>tbody>tr{
  transition:background .15s ease!important}
.table-striped>tbody>tr:hover{
  background:var(--color-blue-50)!important}
.table-striped>tbody>tr>td{
  padding:12px 16px!important;
  color:var(--color-gray-500)!important;
  border-bottom:1px solid var(--color-gray-100)!important;
  font-size:13px!important}
.panel-filled .table-striped>tbody>tr:nth-of-type(odd){
  background-color:#fff!important}
.panel-filled .table-hover>tbody>tr:hover{
  background-color:var(--color-blue-50)!important}
.table-striped>tbody>tr>td>a{
  color:var(--color-blue-600)!important;
  text-decoration:none!important}
.table-striped>tbody>tr>td>a:hover{
  color:var(--color-navy-900)!important;
  text-decoration:underline!important}
.table-responsive{
  border-color:var(--color-gray-200)!important}
.label{
  display:inline-block!important;
  vertical-align:middle!important;
  border-radius:20px!important;
  padding:4px 12px!important;
  font-size:11px!important;
  font-weight:600!important;
  letter-spacing:.3px!important;
  text-transform:uppercase!important}
.label-default{
  background:var(--color-gray-200)!important;
  color:var(--color-gray-500)!important;
  border:none!important}
.label-success{
  background:var(--color-success-bg)!important;
  color:var(--color-success)!important;
  border:none!important}
.label-primary{
  background:var(--color-warning-bg)!important;
  color:var(--color-warning)!important;
  border:none!important}
.label-danger{
  background:var(--color-danger-bg)!important;
  color:var(--color-danger)!important;
  border:none!important}
.label-warning{
  background:var(--color-warning-bg)!important;
  color:var(--color-warning)!important;
  border:none!important}
.label-info{
  background:var(--color-info-bg)!important;
  color:var(--color-info)!important;
  border:none!important}
.btn{
  border-radius:var(--radius-sm)!important;
  font-weight:500!important;
  font-size:13px!important;
  padding:8px 18px!important;
  transition:all .2s ease!important;
  letter-spacing:.2px!important;
  border:none!important}
.btn-primary{
  background:linear-gradient(135deg,
var(--color-blue-600) 0,
var(--color-blue-500) 100%)!important;
  color:#fff!important;
  box-shadow:0 2px 4px rgba(47,
111,
179,
.3)!important}
.btn-primary:hover{
  background:linear-gradient(135deg,
var(--color-navy-800) 0,
var(--color-blue-600) 100%)!important;
  box-shadow:0 4px 8px rgba(47,
111,
179,
.4)!important;
  transform:translateY(-1px)!important}
.btn-success{
  background:linear-gradient(135deg,
#14213d 0,
#16265c 100%)!important;
  color:#fff!important;
  box-shadow:0 2px 4px rgba(20,
33,
61,
.3)!important}
.btn-success:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 4px 8px rgba(20,
33,
61,
.4)!important}
.btn-warning{
  background:var(--color-blue-600)!important;
  color:#fff!important}
.btn-warning:hover{
  background:var(--color-navy-900)!important}
.btn-danger{
  background:var(--color-danger)!important;
  color:#fff!important}
.btn-danger:hover{
  background:#b22424!important}
.btn-default{
  background:#fff!important;
  color:var(--color-gray-500)!important;
  border:1px solid var(--color-gray-200)!important}
.btn-default:hover{
  background:var(--color-gray-50)!important;
  border-color:var(--color-gray-300)!important;
  color:var(--color-navy-900)!important}
.btn-sm{
  padding:5px 12px!important;
  font-size:12px!important}
.form-group .btn,
.panel-body .btn{
  margin-right:8px!important;
  margin-bottom:8px!important}
input[type=date]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  display:none}
table.dataTable thead td,
table.dataTable thead th{
  border-bottom:none}
table.dataTable.no-footer{
  border-bottom:none}
.light-green{
  color:var(--color-navy-900)!important;
  font-weight:700!important}
.black{
  background-color:#000;
  border-color:var(--color-blue-500)!important}
.btn-default{
  background-color:#fff!important;
  border-color:var(--color-gray-200)!important;
  color:var(--color-gray-500)!important}
.btn-default:hover{
  background-color:var(--color-gray-50)!important;
  border-color:var(--color-gray-300)!important}
.btn-small{
  font-size:12px!important;
  padding:6px 12px!important;
  border-radius:6px!important;
  font-weight:500!important;
  text-transform:none!important;
  position:relative;
  overflow:hidden;
  transition:all .2s ease}
.btn-small:active{
  transform:scale(.97)}
.form-group label{
  color:var(--color-navy-900)!important;
  font-weight:500!important;
  font-size:13px!important}
.form-control{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:9px 14px!important;
  font-size:13px!important;
  color:var(--color-gray-500)!important;
  background:#fff!important;
  transition:border-color .2s ease,
box-shadow .2s ease!important;
  box-shadow:none!important}
.dataTable-top{
  padding:16px 0;
  border-bottom:1px solid var(--color-gray-100);
  margin-bottom:0}
.dataTable-top .dataTable-selector{
  border:1px solid var(--color-gray-200)!important;
  border-radius:8px!important;
  padding:6px 12px!important}
.tabulator{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  font-size:13px!important}
.tabulator-header{
  background:var(--color-gray-50)!important;
  border-bottom:2px solid var(--color-blue-600)!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important}
.tabulator-header .tabulator-col{
  background:var(--color-gray-50)!important;
  border-right:1px solid var(--color-gray-200)!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  color:var(--color-navy-900)!important}
.tabulator-header .tabulator-col:hover{
  background:var(--color-gray-100)!important}
.tabulator-header .tabulator-col .tabulator-col-content{
  padding:12px 8px!important}
.tabulator-header .tabulator-col .tabulator-col-title{
  white-space:normal!important}
.tabulator-col .tabulator-header-filter{
  background:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:4px 8px!important;
  font-size:12px!important;
  width:100%!important;
  margin-top:4px!important}
.tabulator-col .tabulator-header-filter:focus{
  border-color:var(--color-blue-600)!important;
  box-shadow:0 0 0 2px rgba(47,
111,
179,
.15)!important;
  outline:0!important}
.tabulator-row{
  border-bottom:1px solid var(--color-gray-100)!important;
  background:#fff!important}
.tabulator-row:hover{
  background:var(--color-blue-50)!important}
.tabulator-row.tabulator-selectable:hover{
  background:var(--color-blue-50)!important}
.tabulator-row:nth-child(2n){
  background:var(--color-gray-50)!important}
.tabulator-row:nth-child(2n):hover{
  background:var(--color-blue-50)!important}
.tabulator-cell{
  padding:10px 8px!important;
  vertical-align:middle!important;
  border-right:1px solid var(--color-gray-100)!important}
.tabulator-cell:last-child{
  border-right:none!important}
.tabulator-paginator{
  background:var(--color-gray-50)!important;
  border-top:1px solid var(--color-gray-200)!important;
  padding:8px!important}
.tabulator-page-size{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:4px 8px!important;
  font-size:12px!important;
  background:#fff!important;
  color:var(--color-gray-500)!important}
.tabulator-page{
  display:inline-block!important;
  margin:0 2px!important;
  padding:4px 10px!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  background:#fff!important;
  color:var(--color-gray-500)!important;
  cursor:pointer!important;
  font-size:12px!important;
  text-align:center!important;
  min-width:32px!important}
.tabulator-page:hover{
  background:var(--color-gray-100)!important;
  border-color:var(--color-gray-300)!important}
.tabulator-page.active{
  background:var(--color-blue-600)!important;
  border-color:var(--color-blue-600)!important;
  color:#fff!important}
.tabulator-page.disabled{
  opacity:.5!important;
  cursor:not-allowed!important}
.tabulator-info{
  font-size:12px!important;
  color:var(--color-gray-400)!important}
.tabulator-alert .tabulator-alert-msg{
  background:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--color-gray-500)!important;
  font-size:14px!important;
  padding:40px 0!important}
.tabulator-export-btns{
  display:flex!important;
  gap:6px!important;
  margin:8px 0!important;
  flex-wrap:wrap!important}
.tabulator-export-btns .btn{
  font-size:12px!important;
  padding:4px 10px!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:4px!important}
.table-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  padding:8px 0!important}
.table-search-wrap{
  flex:1 1 200px!important;
  max-width:300px!important}
.table-search-wrap .table-global-search{
  height:34px!important;
  font-size:13px!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:6px 12px!important}
.table-search-wrap .table-global-search:focus{
  border-color:var(--color-blue-600)!important;
  box-shadow:0 0 0 2px rgba(47,
111,
179,
.15)!important;
  outline:0!important}
#orders_table thead th{
  background:var(--color-gray-50)!important;
  font-weight:600!important;
  text-transform:uppercase;
  font-size:11px!important;
  letter-spacing:.5px;
  padding:14px 16px!important;
  border-bottom:2px solid var(--color-gray-200)!important}
#orders_table tbody td{
  padding:10px 8px!important;
  vertical-align:middle}
.navbar-store-info .store-name-link{
  font-size:16px!important;
  letter-spacing:-.2px!important}
.form-control:focus{
  border-color:var(--color-blue-600)!important;
  box-shadow:0 0 0 3px rgba(47,
111,
179,
.15)!important;
  outline:0!important}
label{
  font-weight:500!important;
  font-size:13px!important;
  color:var(--color-gray-500)!important;
  margin-bottom:6px!important}
select.form-control{
  background-color:#fff!important}
textarea.form-control{
  background-color:#fff!important;
  resize:vertical}
fieldset[disabled] .form-control{
  background-color:var(--color-gray-100)!important;
  opacity:1}
.box{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-sm)!important;
  margin-bottom:20px!important;
  overflow:hidden!important;
  background:#fff!important}
.box-header{
  background:var(--color-gray-50)!important;
  border-bottom:1px solid var(--color-gray-200)!important;
  padding:14px 18px!important}
.box-header .box-name h4,
.box-header .box-name span{
  color:var(--color-navy-900)!important;
  font-weight:600!important}
.box-content{
  padding:12px!important;
  background:#fff!important}
.tabulator-col.sortable .tabulator-col-sorter{
  color:var(--color-gray-400)!important}
.tabulator-col.sorted .tabulator-col-sorter{
  color:var(--color-blue-600)!important}
.tabulator-col-resize-handle{
  background:var(--color-gray-300)!important}
.tabulator-col-resize-handle:hover{
  background:var(--color-blue-600)!important}
.tabulator-col-title{
  white-space:normal!important;
  word-wrap:break-word!important}
.tabulator-row.tabulator-selected{
  background:var(--color-blue-100)!important}
.tabulator-row.tabulator-selected:hover{
  background:var(--color-blue-150)!important}
.tabulator-header-filter button{
  background:var(--color-gray-100)!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--color-gray-500)!important;
  font-size:12px!important}
.dt-buttons .btn:hover{
  background:var(--color-gray-200)!important}
div.dt-button-info{
  background-color:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  color:var(--color-gray-500)!important}
.modal-content{
  background-color:#fff!important;
  border:none!important;
  border-radius:var(--radius-lg)!important;
  box-shadow:var(--shadow-lg)!important}
.modal-content .modal-header{
  border-color:var(--color-gray-200)!important;
  background:var(--color-gray-50)!important;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0!important}
.modal-content .modal-title{
  color:var(--color-navy-900)!important;
  font-size:18px!important;
  font-weight:600!important}
.modal-content .modal-body{
  padding:24px!important;
  color:var(--color-gray-500)!important}
.modal-content .modal-footer{
  border-color:var(--color-gray-200)!important;
  background:var(--color-gray-50)!important;
  border-radius:0 0 var(--radius-lg) var(--radius-lg)!important}
.modal-backdrop.in{
  opacity:.5!important;
  background:#000}
.tooltip-inner{
  background-color:var(--color-navy-900)!important;
  color:#fff!important;
  border-radius:var(--radius-sm)!important;
  padding:6px 12px!important;
  font-size:12px!important}
.tooltip.top .tooltip-arrow{
  border-top-color:var(--color-navy-900)!important}
.tooltip.bottom .tooltip-arrow{
  border-bottom-color:var(--color-navy-900)!important}
.tooltip.left .tooltip-arrow{
  border-left-color:var(--color-navy-900)!important}
.tooltip.right .tooltip-arrow{
  border-right-color:var(--color-navy-900)!important}
.dropdown-menu{
  background-color:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:var(--shadow-md)!important}
.dropdown-menu>li>a{
  color:var(--color-gray-500)!important;
  padding:8px 16px!important}
.dropdown-menu>li>a:hover{
  background-color:var(--color-gray-50)!important;
  color:var(--color-navy-900)!important}
.dropdown-menu>.divider{
  background-color:var(--color-gray-200)!important}
.progress{
  background-color:var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  height:8px}
.progress-bar{
  background-color:var(--color-blue-600)!important}
.nav-tabs>li>a{
  color:var(--color-gray-400)!important;
  border-color:var(--color-gray-200)!important}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{
  color:var(--color-blue-600)!important;
  background-color:#fff!important;
  border-color:var(--color-gray-200)!important;
  border-bottom-color:transparent!important;
  font-weight:500!important}
.nav-tabs>li>a:hover{
  border-color:var(--color-gray-100) var(--color-gray-100) var(--color-gray-200)!important;
  background-color:var(--color-gray-50)!important}
.tab-content{
  border:1px solid var(--color-gray-200)!important;
  border-top:none!important;
  background-color:#fff!important;
  padding:20px!important;
  border-radius:0 0 var(--radius-sm) var(--radius-sm)!important}
.tab-pane .panel-body{
  border-top:none!important}
.errorMessage{
  background:var(--color-danger-bg)!important;
  color:var(--color-danger)!important;
  border:1px solid var(--color-danger)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin:16px 20px!important;
  font-size:13px!important}
.successMessage{
  background:var(--color-success-bg)!important;
  color:var(--color-success)!important;
  border:1px solid var(--color-success)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin:16px 20px!important;
  font-size:13px!important}
.toast-success{
  background-color:#28a745!important;
  color:#fff!important;
  border:none!important}
.toast-error{
  background-color:#dc3545!important;
  color:#fff!important;
  border:none!important}
.toast-warning{
  background-color:#ffc107!important;
  color:#333!important;
  border:none!important}
.toast-info{
  background-color:#17a2b8!important;
  color:#fff!important;
  border:none!important}
.addon_hidden{
  display:none!important}
.navigation::-webkit-scrollbar{
  width:6px}
.navigation::-webkit-scrollbar-track{
  background:0 0}
.navigation::-webkit-scrollbar-thumb{
  background:var(--color-gray-300);
  border-radius:3px}
.navigation::-webkit-scrollbar-thumb:hover{
  background:var(--color-gray-400)}
.btn-order-confirm{
  display:inline-block!important;
  margin-top:5px!important;
  background-color:var(--color-warning)!important;
  color:#fff!important;
  border-color:var(--color-warning)!important;
  border-radius:var(--radius-sm)!important;
  font-size:12px!important;
  padding:5px 12px!important}
.btn-order-confirm:hover{
  background-color:#c4620f!important;
  border-color:#c4620f!important}
.btn-order-view{
  display:inline-flex!important;
  align-items:center!important;
  margin:2px!important;
  background-color:var(--color-blue-600)!important;
  color:#fff!important;
  border-color:var(--color-blue-600)!important;
  border-radius:var(--radius-sm)!important;
  font-size:12px!important;
  padding:5px 12px!important}
.btn-order-view:hover{
  background-color:var(--color-navy-600)!important;
  border-color:var(--color-navy-600)!important}
.btn-order-reprint{
  display:inline-flex!important;
  align-items:center!important;
  margin:2px!important;
  background-color:var(--color-gray-500)!important;
  color:#fff!important;
  border-color:var(--color-gray-500)!important;
  border-radius:var(--radius-sm)!important;
  font-size:12px!important;
  padding:5px 12px!important}
.btn-order-reprint:hover{
  background-color:var(--color-gray-400)!important;
  border-color:var(--color-gray-400)!important}
.order-refund-text{
  font-size:11px!important;
  color:var(--color-gray-400)!important}
.order-edit-link{
  color:#6c8ebf!important;
  font-size:16px!important;
  text-decoration:none!important;
  padding:6px!important}
.order-edit-link:hover{
  color:var(--color-navy-900)!important}
.label.label-default{
  background-color:#e8edf2!important;
  color:#555!important;
  font-weight:500!important;
  font-size:11px!important;
  border-radius:4px!important;
  padding:2px 6px!important}
.label.switch{
  position:relative!important;
  display:inline-block!important;
  width:50px!important;
  height:24px!important;
  background-color:var(--color-gray-300)!important;
  border-radius:24px!important;
  cursor:pointer!important;
  transition:background-color .2s ease!important;
  margin-bottom:0!important;
  padding:0!important;
  font-size:0!important;
  letter-spacing:0!important;
  text-transform:none!important}
.label.switch input[type=checkbox]{
  opacity:0!important;
  width:0!important;
  height:0!important;
  position:absolute!important}
.label.switch input[type=checkbox]:checked+.check,
.label.switch input[type=checkbox]:checked~.check{
  left:26px!important}
.label.switch input[type=checkbox]:checked{
  background-color:var(--color-blue-600)!important}
.label.switch:has(input[type=checkbox]:checked){
  background-color:var(--color-blue-600)!important}
.label.switch::after{
  content:''!important;
  position:absolute!important;
  top:2px!important;
  left:2px!important;
  width:20px!important;
  height:20px!important;
  background-color:#fff!important;
  border-radius:50%!important;
  transition:left .2s ease!important;
  box-shadow:0 1px 3px rgba(0,
0,
0,
.2)!important}
.label.switch:has(input[type=checkbox]:checked)::after{
  left:28px!important}
.table>tbody>tr>td,
.table>thead>tr>th{
  vertical-align:middle!important}
.modal-unconfirmed .modal-content{
  background-color:var(--color-warning)!important}
.modal-unconfirmed .modal-body{
  background-color:var(--color-warning)!important;
  color:#000!important}
.modal-unconfirmed .orders_no{
  font-size:48px!important;
  font-weight:700!important;
  margin:0!important}
.navbar-brand img{
  height:auto!important;
  max-height:44px!important;
  width:auto!important;
  max-width:90%!important;
  aspect-ratio:auto!important}
@media (max-width:991px){
  .navbar-default{
  margin-left:0!important}
.navbar-default .navbar-header{
  width:auto!important;
  min-width:auto!important}
.navbar-default .navbar-brand,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover{
  width:auto!important;
  padding:8px 8px!important}
.navbar-default .navbar-brand img{
  max-height:45px!important;
  width:auto!important}
.navbar-collapse,
.navbar-collapse.collapse{
  display:flex!important;
  visibility:visible!important;
  height:56px!important;
  min-height:0!important;
  max-height:56px!important;
  padding-bottom:0!important;
  padding-top:0!important;
  flex:1 1 auto!important;
  align-items:center!important;
  justify-content:flex-end!important;
  border:none!important;
  box-shadow:none!important;
  overflow:visible!important;
  z-index:1!important}
.navbar-header{
  z-index:10!important;
  position:relative!important}
.sidebar-toggle-btn{
  z-index:100!important;
  position:relative!important}
.navbar-collapse .profil-link{
  display:flex!important;
  flex:0 0 auto!important}
.navbar-collapse .profil-link>a{
  height:56px!important;
  padding:0 12px!important}
.navbar-store-info{
  padding:0 8px!important;
  font-size:13px!important}
.navbar-store-info .store-name-link{
  font-size:13px!important}
}
@media (max-width:991px){
  .profil-link .profile-address{
  display:none!important}
.profil-link .logout-link{
  display:none!important}
.profil-link>a{
  padding:0 8px!important}
}
@media (max-width:768px){
  .navbar-store-info{
  display:none!important}
}
table.dataTable thead td,
table.dataTable thead th{
  border-bottom:none!important}
table.dataTable.no-footer{
  border-bottom:none!important}
input[type=date]::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  display:none!important}
.right{
  text-align:right!important}
.nav-icon{
  width:20px!important;
  text-align:center!important;
  color:var(--color-gray-400)!important;
  transition:color .2s ease!important;
  margin-right:8px!important}
.luna-nav.nav>li.active>a .nav-icon{
  color:var(--color-blue-600)!important}
.luna-nav.nav>li>a:hover .nav-icon{
  color:var(--color-blue-600)!important}
.admin-logo{
  width:90%!important;
  height:auto!important;
  max-height:44px!important;
  margin-top:0!important}
.store-name-link{
  font-family:Roboto,
sans-serif!important;
  color:var(--color-gray-600)!important;
  font-weight:500!important}
.logout-link{
  display:none!important}
.user-dropdown .logout-link{
  display:block!important}
.profile-address-uppercase{
  text-transform:uppercase!important}
.admin-notes-block{
  padding:8px 12px!important;
  border-top:1px solid #e3e6ea!important}
.admin-notes-toggle{
  width:100%!important;
  text-align:left!important;
  background:0 0!important;
  border:none!important;
  color:#8a96a8!important;
  font-size:12px!important;
  font-weight:500!important;
  padding:6px 4px!important;
  cursor:pointer!important;
  letter-spacing:.3px!important}
.admin-notes-toggle i{
  margin-right:6px!important}
.admin-notes-toggle.active{
  color:#2f6fb3!important}
.admin-notes-textarea{
  width:100%!important;
  font-size:12px!important;
  border:1px solid #dde3ec!important;
  border-radius:6px!important;
  padding:8px!important;
  margin-top:6px!important;
  resize:vertical!important;
  box-sizing:border-box!important}
.support-block{
  margin:12px 12px 16px!important;
  padding:14px 14px 12px!important;
  background:linear-gradient(135deg,var(--color-blue-50) 0%,var(--color-blue-100) 100%)!important;
  border-radius:var(--radius-md)!important;
  border-top:3px solid var(--color-blue-400)!important;
  box-shadow:var(--shadow-sm)!important}
.support-block-header{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:10px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid rgba(45,103,178,0.15)!important}
.support-block-header i{
  color:var(--color-blue-600)!important;
  font-size:14px!important}
.support-block-header span{
  font-size:12px!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important;
  text-transform:uppercase!important;
  letter-spacing:0.5px!important}
.support-block p{
  font-size:12px!important;
  color:var(--color-gray-500)!important;
  margin:0!important;
  line-height:1.6!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important}
.support-block-phone{
  margin-bottom:6px!important}
.support-block-phone i{
  color:var(--color-blue-600)!important;
  font-size:12px!important;
  flex-shrink:0!important}
.support-block-phone a{
  color:var(--color-blue-600)!important;
  font-weight:700!important;
  font-size:14px!important;
  text-decoration:none!important}
.support-block-phone a:hover{
  color:var(--color-navy-900)!important;
  text-decoration:underline!important}
.support-block-email{
  margin-top:2px!important}
.support-block-email i{
  color:var(--color-gray-400)!important;
  font-size:11px!important;
  flex-shrink:0!important}
.support-block-email a{
  color:var(--color-blue-600)!important;
  font-weight:500!important;
  font-size:12px!important;
  text-decoration:none!important}
.support-block-email a:hover{
  color:var(--color-navy-900)!important;
  text-decoration:underline!important}
.support-phone{
  color:var(--color-blue-600)!important;
  font-weight:700!important;
  font-size:13px!important;
  display:block!important;
  margin:4px 0!important}
.flex-fill{
  flex:1!important}
.flex-row{
  display:flex!important;
  flex-direction:row!important}
.flex-gap-sm{
  gap:8px!important}
.flex-gap-md{
  gap:16px!important}
.justify-between{
  justify-content:space-between!important}
.items-center{
  align-items:center!important}
.order-link{
  color:var(--color-blue-500)!important;
  font-weight:600!important;
  text-decoration:none!important}
.order-link:hover{
  color:var(--color-navy-900)!important;
  text-decoration:underline!important}
.view-all-link{
  color:var(--color-blue-500)!important;
  font-size:13px!important;
  font-weight:600!important;
  text-decoration:none!important}
.view-all-link:hover{
  color:var(--color-navy-900)!important;
  text-decoration:underline!important}
.text-primary-bold{
  font-weight:600!important;
  color:var(--color-gray-900)!important}
.text-amount{
  font-weight:700!important;
  color:var(--color-gray-900)!important}
.text-small-muted{
  font-size:12px!important;
  color:var(--color-gray-400)!important}
.metric-change-positive{
  color:var(--color-blue-100)!important}
.metric-change-negative{
  color:var(--color-danger)!important}
.list-row{
  display:flex!important;
  justify-content:space-between!important;
  padding:10px 0!important}
.list-row-bordered{
  border-bottom:1px solid var(--color-gray-200)!important}
.list-row-label{
  color:var(--color-gray-400)!important}
.list-row-value{
  font-weight:700!important;
  color:var(--color-gray-900)!important}
.card-header-actions{
  display:flex!important;
  gap:8px!important}
.text-navy{
  color:var(--color-gray-900)!important}
.text-blue{
  color:var(--color-blue-500)!important}
.text-muted-custom{
  color:var(--color-gray-400)!important}
.fw-600{
  font-weight:600!important}
.fw-700{
  font-weight:700!important}
.fs-12{
  font-size:12px!important}
.fs-13{
  font-size:13px!important}
.no-decoration{
  text-decoration:none!important}
.input-width-400{
  width:400px!important}
.input-width-200{
  width:200px!important}
.input-width-80{
  width:80px!important}
.input-full-width{
  width:100%!important}
.form-input-styled{
  width:100%!important;
  border:solid 1px #ccc!important;
  padding:5px!important}
.form-input-styled-white{
  width:100%!important;
  border:solid 1px #ccc!important;
  padding:5px!important;
  background:#fff!important}
.header-icon{
  margin-right:8px!important;
  color:#2f6fb3!important}
.mt-10{
  margin-top:10px!important}
.mt-20{
  margin-top:20px!important}
.mt-30{
  margin-top:30px!important}
.mb-10{
  margin-bottom:10px!important}
.mb-5{
  margin-bottom:5px!important}
.mr-8{
  margin-right:8px!important}
.mr-10{
  margin-right:10px!important}
.divider-light{
  border-top:1px solid var(--color-gray-200)!important;
  margin:16px 0!important}
.divider-dark{
  height:1px!important;
  color:gray!important;
  background-color:#545353!important;
  border:none!important;
  margin:16px 0!important}
.text-red{
  color:red!important}
.text-break-all{
  word-break:break-all!important}
.text-center{
  text-align:center!important}
.text-right{
  text-align:right!important}
.float-right{
  float:right!important}
.clear-both{
  clear:both!important}
.hidden{
  display:none!important}
.w-40{
  width:40%!important}
.w-50{
  width:50%!important}
.w-70{
  width:70%!important}
.w-80{
  width:80px!important}
.w-90{
  width:80px!important}
.product-report-title{
  font-weight:700!important;
  font-size:15px!important;
  background:var(--color-gray-50)!important}
.btn-rounded{
  border-radius:8px!important;
  padding:8px 24px!important}
.img-preview-sm{
  max-width:300px!important}
.img-preview-md{
  width:500px!important}
.status-badge{
  display:inline-block!important;
  padding:5px 10px!important;
  color:#fff!important;
  border-radius:4px!important}
.status-badge-success{
  background-color:green!important}
.status-badge-danger{
  background-color:red!important}
.container-offset{
  margin-top:8%!important}
.p-8{
  padding:8px!important}
.p-10{
  padding:10px!important}
@media (max-width:767px){
  .navigation{
  left:-240px!important;
  z-index:1020!important}
body.nav-toggle .navigation{
  left:0!important}
.mobile-overlay{
  display:none!important;
  position:fixed!important;
  top:56px!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  background:rgba(20,
33,
61,
.4)!important;
  z-index:1010!important}
body.nav-toggle .mobile-overlay{
  display:block!important}
.content{
  margin-left:0!important;
  padding:12px!important}
.panel-heading{
  padding:16px!important;
  font-size:15px!important}
.panel-body{
  padding:16px!important}
.table-responsive{
  border-radius:12px}
.btn-small{
  padding:10px 16px!important;
  min-height:44px}
.navbar-default{
  margin-left:0!important}
.input-width-200,
.input-width-400{
  width:100%!important}
.version-badge{
  display:none!important}
.table-responsive{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch!important}
}
@media (max-width:991px){
  .navbar-default{
  margin-left:0!important}
.content{
  margin-left:0!important}
body.nav-toggle .content{
  margin-left:0!important}
.navigation{
  left:-240px!important;
  z-index:1020!important}
body.nav-toggle .navigation{
  left:0!important}
body.nav-toggle .mobile-overlay{
  display:block!important}
.mobile-overlay{
  display:none!important;
  position:fixed!important;
  top:56px!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  background:rgba(20,
33,
61,
.4)!important;
  z-index:1010!important}
/* Prevent Safari iOS from zooming on input focus (requires font-size >= 16px) */
.content .form-control,
.content input,
.content textarea,
.content select{
font-size:16px!important}
}
@media print{
  .btn,
.navbar-default,
.navigation,
.no-print,
.pagination,
.sidebar,
.tabulator-export-btns,
.tabulator-header,
.tabulator-paginator,
.top-navbar{
  display:none!important}
.content{
  margin:0!important;
  padding:0!important;
  background:#fff!important}
table{
  page-break-inside:auto!important}
tr{
  page-break-inside:avoid!important;
  page-break-after:auto!important}
thead{
  display:table-header-group!important}
.box,
.card,
.panel{
  border:1px solid #ccc!important;
  box-shadow:none!important;
  page-break-inside:avoid!important}
a[href]:after{
  content:" (" attr(href) ")"!important;
  font-size:11px!important;
  color:#666!important}
a[href^="#"]:after,
a[href^=javascript]:after{
  content:""!important}
*{
  -webkit-print-color-adjust:exact!important;
  print-color-adjust:exact!important}
}
.hint{
  color:var(--color-gray-400);
  font-style:italic;
  font-size:10px}
.scroll-pane{
  width:100%;
  height:200px;
  overflow:auto}
.image_picker_image,
.thumbnail a>img,
.thumbnail>img{
  width:40px;
  height:40px}
#product_cat,
#product_cat li{
  list-style:none;
  margin-left:0;
  padding-left:0}
.product_cat-li{
  margin-bottom:9px}
.product-editor h4,
.product-editor hr{
  margin:0}
.product-editor h4{
  margin-bottom:3px}
.product-editor hr{
  margin-bottom:15px}
.form-block{
  display:block}
input[type=checkbox],
input[type=radio]{
  border:1px solid var(--color-gray-300);
  background:#fff;
  color:var(--color-gray-500);
  clear:none;
  cursor:pointer;
  display:inline-block;
  line-height:0;
  height:16px;
  margin:-4px 4px 0 0;
  outline:0;
  padding:0!important;
  text-align:center;
  vertical-align:middle;
  width:16px;
  min-width:16px}
.form-control-small{
  padding:3px 5px;
  font-size:12px;
  line-height:1.428571429;
  color:var(--color-gray-900);
  background-color:#fff;
  background-image:none;
  border:1px solid var(--color-gray-300);
  -webkit-box-shadow:inset 0 1px 1px rgba(0,
0,
0,
.075);
  box-shadow:inset 0 1px 1px rgba(0,
0,
0,
.075);
  -webkit-transition:border-color ease-in-out .15s,
box-shadow ease-in-out .15s;
  transition:border-color ease-in-out .15s,
box-shadow ease-in-out .15s}
.product-editor label{
  font-weight:400;
  display:block;
  margin:7px 0}
.box-name{
  padding-right:10px}
.box-loading{
  float:right}
.sub-content,
.sub-header{
  padding:15px 10px;
  border:solid;
  border-width:0 0 1px;
  border-color:var(--color-gray-300)}
.sub-header{
  background-color:var(--color-gray-50);
  border-width:0 1px 1px 1px}
.product-data .form-control{
  display:inline-block;
  width:auto;
  margin-bottom:0}
.btn-medium{
  padding:4px 10px;
  margin:0}
.toggle-indicator:before{
  content:"\f142";
  display:inline-block;
  font:400 20px/1 dashicons;
  speak:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-decoration:none!important}
.toggle{
  color:var(--color-gray-900);
  margin-right:10px}
.form-table{
  width:100%}
.remove_attribute{
  color:var(--color-gray-300)}
.remove_attribute:hover{
  color:var(--color-danger)!important}
.product-editor .disabled{
  background-color:var(--color-gray-200)}
.box-loading{
  display:none}
.opaque_wrapper{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:100;
  opacity:.2}
#attributes_container .sub-content{
  display:none}
.sub-header-body{
  z-index:-100}
.variation_select_container{
  max-width:60%;
  display:inline-block}
.single_variation_drop_down{
  margin-bottom:5px}
.fa-options{
  font-size:16px}
.fa-times{
  color:var(--color-danger);
  font-size:17px}
.fa-copy,
.fa-edit{
  color:var(--color-blue-600);
  font-size:15px}
.level2{
  background-color:#fff;
  border-width:0 1px 1px 1px;
  padding:2px 10px 20px}
.allcorners{
  border-width:1px;
  padding:2px 10px}
.addon_table input{
  width:95%}
.fa{
  cursor:pointer}
.new_addon_option{
  margin:5px auto}
.variation_select_container select{
  margin-bottom:5px}
.export_addons_container,
.export_pizza_container,
.import_addons_container,
.import_pizza_container{
  border-bottom:solid 1px var(--color-gray-300);
  display:none}
@media (max-width:768px){
  .tabulator{
  font-size:12px!important}
.tabulator-header .tabulator-col .tabulator-col-content{
  padding:8px 4px!important}
.tabulator-cell{
  padding:8px 4px!important}
.tabulator-page{
  padding:2px 6px!important;
  min-width:28px!important}
}
.byo_main_options td{
  padding-left:10px}
#pizza_byo input{
  width:90%}
.product-editor td input,
.product-editor td select{
  margin:10px 0}
.tabs-left>li>a{
  color:var(--color-gray-900)}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover{
  background-color:var(--color-gray-100)}
.product-editor .sub-header{
  background-color:var(--color-gray-50);
  border-width:1px 1px 1px 1px;
  border-color:var(--color-gray-300)}
.product-data .form-table select{
  background-color:#fff}
#pizza_byo_container{
  font-size:13px}
.form-full{
  width:90%!important}
.product-data input,
.product-data select,
.product-data textarea{
  border-radius:var(--radius-sm)}
.product-data .form-control{
  margin-bottom:5px;
  width:100%}
.attr_variation,
.attr_visible{
  background-color:var(--color-gray-50)}
.attribute_drop_down{
  margin-bottom:10px!important}
.product-editor .form-control{
  padding:10px 5px}
.content .btn{
  padding:8px 16px!important;
  border-radius:var(--radius-sm)!important;
  font-size:13px!important;
  font-weight:500!important;
  transition:all .15s ease!important}
.content .btn-primary{
  background:var(--color-blue-600)!important;
  border-color:var(--color-blue-600)!important;
  color:#fff!important}
.content .btn-primary:hover{
  background:var(--color-blue-500)!important;
  border-color:var(--color-blue-500)!important}
.content .btn-default{
  background:#fff!important;
  border:1px solid var(--color-gray-300)!important;
  color:var(--color-gray-600)!important}
.content .btn-default:hover{
  background:var(--color-gray-50)!important;
  border-color:var(--color-gray-400)!important}
.content .btn-success{
  background:var(--color-success)!important;
  border-color:var(--color-success)!important;
  color:#fff!important}
.content .btn-danger{
  background:var(--color-danger)!important;
  border-color:var(--color-danger)!important;
  color:#fff!important}
.content .btn-warning{
  background:var(--color-warning)!important;
  border-color:var(--color-warning)!important;
  color:#fff!important}
.content .table-striped>tbody>tr:nth-of-type(odd){
  background-color:var(--color-gray-50)!important}
.content .table-hover>tbody>tr:hover{
  background-color:var(--color-blue-50)!important}
.content .table-hover>tbody>tr:hover>td{
  background-color:transparent!important}
.content .table>thead>tr>th{
  background:var(--color-gray-50)!important;
  color:var(--color-navy-900)!important;
  font-size:12px!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  padding:12px 14px!important;
  border-bottom:2px solid var(--color-gray-200)!important}
.content .table>tbody>tr>td{
  padding:10px 14px!important;
  vertical-align:middle!important;
  border-bottom:1px solid var(--color-gray-100)!important}
.content .table>tbody>tr>td:last-child,
.content .table>thead>tr>th:last-child{
  text-align:right!important}
.content .label-success{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-success-bg)!important;
  color:var(--color-success)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .label-info{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-info-bg)!important;
  color:var(--color-info)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .label-default{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-gray-200)!important;
  color:var(--color-gray-600)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .label-warning{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-warning-bg)!important;
  color:var(--color-warning)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .label-danger{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-danger-bg)!important;
  color:var(--color-danger)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .label-primary{
  display:inline-block!important;
  vertical-align:middle!important;
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  border:none!important;
  font-size:11px!important;
  font-weight:600!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .form-control{
  height:36px!important;
  border:1px solid var(--color-gray-300)!important;
  border-radius:var(--radius-sm)!important;
  font-size:13px!important;
  color:var(--color-gray-700)!important;
  background-color:#fff!important;
  padding:6px 12px!important;
  transition:border-color .15s ease,
box-shadow .15s ease!important}
.content .form-control:focus{
  border-color:var(--color-blue-400)!important;
  box-shadow:0 0 0 3px rgba(93,
169,
233,
.15)!important;
  outline:0!important}
.content .form-control[disabled],
.content .form-control[readonly]{
  background-color:var(--color-gray-100)!important;
  opacity:.8!important}
.content select.form-control{
  background-color:#fff!important}
.content select[multiple].form-control{
  height:auto!important;
  min-height:80px!important}
.content textarea.form-control{
  height:auto!important;
  min-height:80px!important;
  resize:vertical!important}
.content .form-group{
  margin-bottom:16px!important}
.content .form-group>label{
  display:block!important;
  margin-bottom:6px!important;
  font-size:13px!important;
  font-weight:500!important;
  color:var(--color-gray-700)!important}
.content .form-group>label .required,
.content .form-group>label:has(.required){
  color:var(--color-danger)!important;
  font-size:14px!important;
  margin-left:2px!important}
.content .panel-filled .box-content h6{
  margin-top:14px!important;
  margin-bottom:4px!important;
  padding-top:10px!important;
  border-top:1px solid var(--color-gray-200)!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  color:var(--color-gray-500)!important;
  font-weight:600!important}
.content .panel-filled .box-content h6:first-child{
  margin-top:0!important;
  padding-top:0!important;
  border-top:none!important}
.content .panel-filled .box-content table.input-full-width tr td{
  padding:8px 12px!important;
  vertical-align:middle!important;
  border-bottom:1px solid var(--color-gray-100)!important}
.content .panel-filled .box-content table.input-full-width tr td b{
  color:var(--color-gray-500)!important;
  font-weight:500!important;
  font-size:12px!important}
.content .panel-filled .box-content table .btn-primary.btn-sm{
  padding:6px 12px!important;
  border-radius:var(--radius-sm)!important;
  font-size:12px!important;
  font-weight:500!important}
.content .panel-filled .box-header .box-name h3{
  font-size:18px!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important;
  margin:0 0 12px 0!important}
.content #tableExample3 td:nth-child(5){
  max-width:200px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important}
.content #tableExample3 td:nth-child(5):hover{
  white-space:normal!important;
  overflow:visible!important;
  position:relative!important;
  z-index:10!important}
.content #tableExample3 td a{
  color:var(--color-blue-600)!important;
  text-decoration:none!important;
  font-weight:600!important;
  transition:color .15s ease!important}
.content #tableExample3 td a:hover{
  color:var(--color-blue-400)!important;
  text-decoration:underline!important}
.content #tableExample3 td:last-child a.fa{
  display:inline-block!important;
  width:32px!important;
  height:32px!important;
  line-height:32px!important;
  text-align:center!important;
  border-radius:var(--radius-sm)!important;
  transition:background-color .15s ease!important;
  margin-right:4px!important}
.content #tableExample3 td:last-child a.fa:hover{
  background-color:var(--color-gray-100)!important}
.content #tableExample3 td:last-child a.fa-edit{
  color:var(--color-blue-600)!important}
.content #tableExample3 td:last-child a.fa-copy{
  color:var(--color-gray-500)!important}
.content #tableExample3 td:last-child a.fa-times{
  color:var(--color-danger)!important}
.content #tableExample3 .label-success{
  background:#e8f5e9!important;
  color:#2e7d32!important}
.content .box-content .row:nth-of-type(2) .btn-primary{
  background:var(--color-gray-50)!important;
  border:1px solid var(--color-gray-300)!important;
  color:var(--color-gray-600)!important;
  font-size:12px!important;
  padding:6px 10px!important}
.content .box-content .row:nth-of-type(2) .btn-primary:hover{
  background:var(--color-blue-50)!important;
  border-color:var(--color-blue-400)!important;
  color:var(--color-blue-600)!important}
.content .box-content .row:nth-of-type(3) .btn-primary{
  background:var(--color-gray-50)!important;
  border:1px solid var(--color-gray-300)!important;
  color:var(--color-gray-600)!important}
.content .box-content .row:nth-of-type(3) .btn-primary:hover{
  background:var(--color-blue-50)!important;
  border-color:var(--color-blue-400)!important}
.content .table-5 tr:has(td b:contains("Grand Total")) td{
  font-size:15px!important;
  font-weight:700!important;
  color:var(--color-navy-900)!important;
  border-top:2px solid var(--color-blue-400)!important;
  border-bottom:2px solid var(--color-blue-400)!important;
  padding:12px 14px!important;
  background-color:var(--color-blue-50)!important}
.content .table-5 tr:has(td b:contains("Total")) td{
  font-weight:600!important;
  border-top:1px solid var(--color-gray-300)!important}
.content .table-5 tr td.header{
  background:var(--color-gray-50)!important;
  padding:12px 14px!important}
.content .table-5 tr td.header h4{
  font-size:14px!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important;
  margin:0!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important}
.content .form-control-secret{
  font-family:'Courier New',
monospace!important;
  letter-spacing:1px!important}
.content .form-control-mode{
  font-weight:600!important;
  border:2px solid var(--color-gray-300)!important;
  border-radius:var(--radius-sm)!important}
.content .box-header .box-name:has(i.fa-plus) span{
  font-size:16px!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important}
.content .box-content .form-group{
  margin-bottom:20px!important}
.content .box-content .form-group label{
  font-size:13px!important;
  font-weight:600!important;
  color:var(--color-gray-600)!important;
  margin-bottom:6px!important}
.content .box-content table.dataTable>tbody>tr{
  position:relative!important;
  border-left:3px solid transparent!important;
  transition:border-color .15s ease!important}
.content .box-content table.dataTable>tbody>tr:hover{
  border-left-color:var(--color-blue-400)!important}
.content .box-content table.dataTable>tbody>tr:before{
  content:''!important;
  position:absolute!important;
  left:-1px!important;
  top:0!important;
  bottom:0!important;
  width:3px!important;
  background:var(--color-gray-200)!important;
  z-index:1!important}
.content .box-content table.dataTable>tbody>tr:hover:before{
  background:var(--color-blue-400)!important}
.content .box-content table.dataTable>tbody>tr>td:nth-child(3),
.content .box-content table.dataTable>tbody>tr>td:nth-child(4),
.content .box-content table.dataTable>thead>tr>th:nth-child(3),
.content .box-content table.dataTable>thead>tr>th:nth-child(4){
  white-space:nowrap!important;
  color:var(--color-gray-500)!important;
  font-size:12px!important;
  font-family:'Courier New',
monospace!important}
.content .box-content table.dataTable>tbody>tr>td:nth-child(5){
  max-width:500px!important;
  word-wrap:break-word!important;
  line-height:1.5!important}
.content .box-content table.dataTable>tbody>tr>td:nth-child(2){
  font-weight:500!important;
  color:var(--color-blue-600)!important}
.content .wizard-steps{
  display:flex!important;
  justify-content:center!important;
  margin-bottom:24px!important;
  padding:16px 0!important}
.content .wizard-step{
  display:flex!important;
  align-items:center!important;
  margin:0 8px!important}
.content .wizard-step-number{
  width:32px!important;
  height:32px!important;
  border-radius:50%!important;
  background:var(--color-gray-200)!important;
  color:var(--color-gray-500)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  font-size:14px!important;
  font-weight:600!important;
  margin-right:8px!important}
.content .wizard-step.active .wizard-step-number{
  background:var(--color-blue-600)!important;
  color:#fff!important}
.content .wizard-step.completed .wizard-step-number{
  background:var(--color-success)!important;
  color:#fff!important}
.content .wizard-step-label{
  font-size:13px!important;
  font-weight:500!important;
  color:var(--color-gray-500)!important}
.content .wizard-step.active .wizard-step-label{
  color:var(--color-blue-600)!important;
  font-weight:600!important}
.content .gallery-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,
minmax(180px,
1fr))!important;
  gap:16px!important;
  padding:16px!important}
.content .gallery-item{
  position:relative!important;
  aspect-ratio:1!important;
  border-radius:var(--radius-sm)!important;
  overflow:hidden!important;
  background:var(--color-gray-100)!important}
.content .gallery-item img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .2s ease!important}
.content .gallery-item:hover img{
  transform:scale(1.05)!important}
.content .gallery-item-overlay{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  background:rgba(20,
33,
61,
.6)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  opacity:0!important;
  transition:opacity .2s ease!important}
.content .gallery-item:hover .gallery-item-overlay{
  opacity:1!important}
.content .force-mode-active{
  background:var(--color-danger-bg)!important;
  border:2px solid var(--color-danger)!important;
  border-radius:var(--radius-md)!important;
  padding:16px 20px!important;
  margin-bottom:16px!important}
.content .force-mode-active .box-name span{
  color:var(--color-danger)!important;
  font-weight:700!important;
  text-transform:uppercase!important}
.content .warning-callout{
  background:#fff3cd!important;
  border:1px solid #ffc107!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin-bottom:16px!important;
  color:#856404!important}
.content .warning-callout:before{
  content:'\f071'!important;
  font-family:FontAwesome!important;
  margin-right:8px!important;
  color:#ffc107!important}
.content .danger-callout{
  background:var(--color-danger-bg)!important;
  border:1px solid var(--color-danger)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin-bottom:16px!important;
  color:var(--color-danger)!important}
.content .danger-callout:before{
  content:'\f06a'!important;
  font-family:FontAwesome!important;
  margin-right:8px!important}
.content .past-orders-banner{
  background:var(--color-gray-50)!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important;
  padding:10px 16px!important;
  margin-bottom:16px!important;
  font-size:13px!important;
  color:var(--color-gray-500)!important}
.content .past-orders-banner:before{
  content:'\f073'!important;
  font-family:FontAwesome!important;
  margin-right:8px!important;
  color:var(--color-gray-400)!important}
.content .past-orders .table>thead>tr>th{
  background:var(--color-gray-100)!important;
  color:var(--color-gray-500)!important}
.content .role-admin{
  background:var(--color-danger-bg)!important;
  color:var(--color-danger)!important;
  padding:3px 10px!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:600!important;
  text-transform:uppercase!important}
.content .role-manager{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important;
  padding:3px 10px!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:600!important;
  text-transform:uppercase!important}
.content .role-staff{
  background:var(--color-gray-100)!important;
  color:var(--color-gray-500)!important;
  padding:3px 10px!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:600!important;
  text-transform:uppercase!important}
.content .printer-status-online:before{
  content:''!important;
  display:inline-block!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:var(--color-success)!important;
  margin-right:6px!important;
  vertical-align:middle!important}
.content .printer-status-offline:before{
  content:''!important;
  display:inline-block!important;
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  background:var(--color-danger)!important;
  margin-right:6px!important;
  vertical-align:middle!important}
.content .coupon-code{
  font-family:'Courier New',
monospace!important;
  font-size:13px!important;
  font-weight:600!important;
  background:var(--color-gray-50)!important;
  padding:2px 6px!important;
  border-radius:4px!important;
  letter-spacing:.5px!important}
.content .code-editor .form-control,
.content .code-editor textarea{
  font-family:'Courier New',
monospace!important;
  font-size:12px!important;
  line-height:1.6!important;
  tab-size:2!important}
.content .sold-out-badge{
  background:var(--color-danger-bg)!important;
  color:var(--color-danger)!important;
  padding:4px 10px!important;
  border-radius:20px!important;
  font-size:11px!important;
  font-weight:600!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important}
.content .blocked-account-row{
  background:var(--color-danger-bg)!important}
.content .blocked-account-row:hover{
  background:#f8d7da!important}
.content .held-order-row{
  background:#fff8e1!important}
.content .held-order-row:hover{
  background:#ffecb3!important}
.content .sticky-save-bar{
  position:sticky!important;
  bottom:0!important;
  background:#fff!important;
  border-top:2px solid var(--color-gray-200)!important;
  padding:12px 20px!important;
  z-index:50!important;
  box-shadow:0 -2px 8px rgba(0,
0,
0,
.08)!important;
  display:flex!important;
  justify-content:flex-end!important;
  gap:8px!important}
.content .file-upload-zone{
  border:2px dashed var(--color-gray-300)!important;
  border-radius:var(--radius-md)!important;
  padding:40px 20px!important;
  text-align:center!important;
  background:var(--color-gray-50)!important;
  transition:border-color .15s ease,
background-color .15s ease!important;
  cursor:pointer!important}
.content .file-upload-zone:hover{
  border-color:var(--color-blue-400)!important;
  background:var(--color-blue-50)!important}
.content .file-upload-zone input[type=file]{
  opacity:0!important;
  position:absolute!important;
  width:100%!important;
  height:100%!important;
  top:0!important;
  left:0!important;
  cursor:pointer!important}
.content .info-callout{
  background:var(--color-info-bg)!important;
  border:1px solid var(--color-info)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin-bottom:16px!important;
  color:var(--color-info)!important}
.content .info-callout:before{
  content:'\f128'!important;
  font-family:FontAwesome!important;
  margin-right:8px!important}
.content .success-callout{
  background:var(--color-success-bg)!important;
  border:1px solid var(--color-success)!important;
  border-radius:var(--radius-sm)!important;
  padding:12px 16px!important;
  margin-bottom:16px!important;
  color:var(--color-success)!important}
.content .success-callout:before{
  content:'\f058'!important;
  font-family:FontAwesome!important;
  margin-right:8px!important}
.content .form-section-divider{
  border:none!important;
  border-top:2px solid var(--color-gray-200)!important;
  margin:24px 0 20px 0!important}
.content .form-section-title{
  font-size:15px!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important;
  margin-bottom:16px!important;
  padding-bottom:8px!important;
  border-bottom:1px solid var(--color-gray-200)!important}
.content .form-control[type=date],
.content .form-control[type=datetime-local],
.content .form-control[type=time],
.content input[type=date],
.content input[type=datetime-local],
.content input[type=time],
.form-comp[type=date],
.form-comp[type=time],
input[type=date],
input[type=datetime-local],
input[type=time]{
  border:1.5px solid var(--color-gray-300)!important;
  border-radius:var(--radius-sm)!important;
  padding:10px 14px!important;
  font-size:14px!important;
  font-family:Roboto,
sans-serif!important;
  color:var(--color-gray-600)!important;
  background-color:#fff!important;
  transition:border-color .2s ease,
box-shadow .2s ease!important;
  min-height:42px!important;
  box-sizing:border-box!important}
.content .form-control[type=date]:focus,
.content .form-control[type=time]:focus,
.content input[type=date]:focus,
.content input[type=datetime-local]:focus,
.content input[type=time]:focus,
.form-comp[type=date]:focus,
.form-comp[type=time]:focus,
input[type=date]:focus,
input[type=datetime-local]:focus,
input[type=time]:focus{
  border-color:var(--color-blue-400)!important;
  box-shadow:0 0 0 3px rgba(93,
169,
233,
.15)!important;
  outline:0!important}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{
  cursor:pointer!important}
input[type=date]::-webkit-inner-spin-button,
input[type=datetime-local]::-webkit-inner-spin-button,
input[type=time]::-webkit-inner-spin-button{
  -webkit-appearance:none!important;
  display:none!important}
input[type=date]::-moz-focus-inner,
input[type=datetime-local]::-moz-focus-inner,
input[type=time]::-moz-focus-inner{
  padding:0!important;
  border:0!important}
.ui-timepicker-wrapper{
  overflow-y:auto!important;
  max-height:220px!important;
  width:8em!important;
  background:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:var(--shadow-lg)!important;
  outline:0!important;
  z-index:10001!important;
  margin:5px 0 0 0!important;
  font-family:Roboto,
sans-serif!important}
.ui-timepicker-list{
  margin:0!important;
  padding:4px 0!important;
  list-style:none!important}
.ui-timepicker-list li{
  padding:8px 14px!important;
  cursor:pointer!important;
  white-space:nowrap!important;
  color:var(--color-gray-500)!important;
  list-style:none!important;
  margin:0!important;
  font-size:13px!important;
  border-radius:0!important;
  transition:background .15s ease,
color .15s ease!important}
.ui-timepicker-list li:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
.ui-timepicker-list .ui-timepicker-selected:hover,
li.ui-timepicker-selected{
  background:var(--color-blue-600)!important;
  color:#fff!important;
  font-weight:500!important}
.ui-timepicker-list:hover .ui-timepicker-selected{
  background:var(--color-blue-600)!important;
  color:#fff!important}
.ui-timepicker-duration{
  margin-left:5px!important;
  color:var(--color-gray-400)!important;
  font-size:11px!important}
.ui-timepicker-list li:hover .ui-timepicker-duration{
  color:var(--color-blue-400)!important}
li.ui-timepicker-selected .ui-timepicker-duration{
  color:rgba(255,
255,
255,
.7)!important}
.ui-timepicker-list li.ui-timepicker-disabled,
.ui-timepicker-list li.ui-timepicker-disabled:hover{
  color:var(--color-gray-300)!important;
  cursor:not-allowed!important;
  background:0 0!important}
.ui-timepicker-list li.ui-timepicker-selected.ui-timepicker-disabled{
  background:var(--color-gray-100)!important;
  color:var(--color-gray-400)!important}
.datepicker{
  border-radius:var(--radius-md)!important;
  border:1px solid var(--color-gray-200)!important;
  box-shadow:var(--shadow-lg)!important;
  background:#fff!important;
  padding:12px!important;
  font-family:Roboto,
sans-serif!important}
.datepicker>thead>tr{
  border-radius:var(--radius-sm)!important}
.datepicker>thead>tr>th{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  text-align:center!important;
  line-height:34px!important;
  color:var(--color-blue-600)!important;
  font-weight:600!important;
  font-size:12px!important;
  text-transform:uppercase!important;
  border:none!important;
  background:0 0!important;
  transition:background .15s ease!important}
.datepicker>thead>tr>th:hover{
  background:var(--color-blue-50)!important}
.datepicker>thead>tr:first-child>th{
  background:var(--color-gray-50)!important;
  font-size:14px!important;
  border-radius:var(--radius-sm)!important;
  height:auto!important;
  line-height:normal!important;
  padding:6px 0!important}
.datepicker>thead>tr:first-child>th.next,
.datepicker>thead>tr:first-child>th.prev{
  border-radius:50%!important;
  width:34px!important;
  height:34px!important;
  line-height:34px!important;
  padding:0!important}
.datepicker>thead>tr:first-child>th.next:hover,
.datepicker>thead>tr:first-child>th.prev:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
.datepicker td,
.datepicker th{
  width:34px!important;
  height:34px!important;
  border-radius:50%!important;
  text-align:center!important;
  border:none!important}
.datepicker td{
  color:var(--color-gray-500)!important;
  font-size:13px!important;
  font-weight:400!important;
  transition:background .15s ease,
color .15s ease!important}
.datepicker td.day:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
.datepicker td.active{
  background:var(--color-blue-600)!important;
  border-color:var(--color-blue-600)!important;
  color:#fff!important;
  font-weight:600!important}
.datepicker td.active:hover{
  background:var(--color-blue-500)!important}
.datepicker td.today{
  background:var(--color-blue-100)!important;
  font-weight:600!important}
.datepicker td.today:hover{
  background:var(--color-blue-100)!important}
.datepicker td.today.active{
  background:var(--color-blue-600)!important;
  color:#fff!important}
.datepicker td.other-month{
  color:var(--color-gray-300)!important}
.datepicker td.disabled{
  color:var(--color-gray-300)!important;
  cursor:not-allowed!important}
.datepicker td.disabled:hover{
  background:0 0!important;
  cursor:not-allowed!important}
.datepicker-inline{
  background:#fff!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-md)!important}
table.jCalendar{
  border:none!important;
  background:#fff!important;
  border-collapse:separate!important;
  border-spacing:2px!important;
  font-family:Roboto,
sans-serif!important}
table.jCalendar th{
  background:var(--color-gray-50)!important;
  color:var(--color-blue-600)!important;
  font-weight:600!important;
  padding:6px 5px!important;
  font-size:11px!important;
  text-transform:uppercase!important;
  border-radius:var(--radius-sm)!important}
table.jCalendar td{
  background:#fff!important;
  color:var(--color-gray-500)!important;
  padding:6px 5px!important;
  text-align:center!important;
  border-radius:50%!important;
  cursor:pointer!important;
  transition:background .15s ease,
color .15s ease!important;
  font-size:13px!important}
table.jCalendar td:hover{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
table.jCalendar td.other-month{
  background:0 0!important;
  color:var(--color-gray-300)!important}
table.jCalendar td.today{
  background:var(--color-blue-100)!important;
  color:var(--color-blue-600)!important;
  font-weight:600!important}
table.jCalendar td.selected{
  background:var(--color-blue-600)!important;
  color:#fff!important;
  font-weight:600!important}
table.jCalendar td.selected.dp-hover{
  background:var(--color-blue-500)!important;
  color:#fff!important}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td{
  background:var(--color-blue-50)!important;
  color:var(--color-blue-600)!important}
table.jCalendar tr.selectedWeek td{
  background:var(--color-blue-100)!important;
  color:var(--color-blue-600)!important}
table.jCalendar td.disabled,
table.jCalendar td.disabled.dp-hover{
  background:var(--color-gray-50)!important;
  color:var(--color-gray-300)!important;
  cursor:not-allowed!important}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable.dp-hover,
table.jCalendar td.unselectable:hover{
  background:var(--color-gray-50)!important;
  color:var(--color-gray-300)!important;
  cursor:not-allowed!important}
div.dp-popup{
  position:relative!important;
  background:#fff!important;
  font-size:13px!important;
  font-family:Roboto,
sans-serif!important;
  padding:8px!important;
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-md)!important;
  box-shadow:var(--shadow-lg)!important}
div.dp-popup h2{
  font-size:14px!important;
  text-align:center!important;
  margin:4px 0 8px 0!important;
  padding:0!important;
  color:var(--color-navy-900)!important;
  font-weight:600!important}
div.dp-popup a{
  color:var(--color-blue-600)!important;
  text-decoration:none!important}
div.dp-popup a:hover{
  color:var(--color-blue-400)!important}
section.content>.container-fluid>form>.row>.col-md-9>.row+.row{
  margin-top:0!important;
  margin-bottom:0!important}
section.content .col-md-9 .panel+.row{
  margin-top:0!important}
section.content .col-md-9 .row>.col-md-12>.panel+.row{
  margin-top:0!important}
section.content .col-md-9>.row:first-child .panel.panel-filled{
  margin-bottom:0!important}
section.content .col-md-9 .box.product-data{
  margin-top:0!important}
section.content .col-md-9>.row:first-child .panel.panel-filled .panel-body{
  padding:8px 16px 4px 16px!important}
section.content .col-md-9 .form-group{
  margin-bottom:8px!important}
section.content .col-md-9 .form-group:last-child{
  margin-bottom:0!important}
section.content .col-md-9 .box.product-data{
  margin-bottom:0!important}
section.content .box.product-data>.panel.panel-filled{
  margin-top:0!important;
  margin-bottom:0!important}
section.content .box.product-data>.panel.panel-filled .panel-body{
  padding:4px 8px!important}
section.content .box-content .row+.row{
  margin-top:0!important}
section.content .col-md-3 .panel.panel-filled .panel-body{
  padding:4px 8px!important}
section.content .col-md-3 .box{
  margin-bottom:0!important}
section.content .col-md-3 .box+.box{
  margin-top:0!important}
section.content .col-md-3 .box-content{
  padding:4px!important}
section.content .col-md-3 hr{
  margin-top:4px!important;
  margin-bottom:4px!important}
section.content .col-md-3 .box-header{
  padding:6px 12px!important}
section.content .col-md-3 .panel.panel-filled{
  margin-bottom:0!important}
section.content .tab-content{
  padding:0!important}
section.content .form-table hr{
  margin-top:4px!important;
  margin-bottom:4px!important}
section.content .col-md-9>.panel.panel-filled{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important}
section.content .col-md-9 .box.product-data{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important}
section.content .col-md-3>.panel.panel-filled{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important}
section.content>.container-fluid>form>.row>.col-md-9{
  padding-right:4px!important}
.content .btn{
  transition:all .15s ease!important}
.content .btn:hover:not(:disabled):not(.disabled){
  transform:translateY(-1px)!important;
  box-shadow:0 2px 8px rgba(0,
0,
0,
.1)!important}
.content .btn:active:not(:disabled):not(.disabled){
  transform:translateY(0)!important}
.content .btn.disabled,
.content .btn:disabled{
  opacity:.6!important;
  cursor:not-allowed!important;
  pointer-events:none!important}
.content .table tbody tr:hover{
  background-color:var(--color-blue-50)!important;
  transition:background-color .15s ease!important}
.content .form-control:focus{
  border-color:var(--color-blue-500)!important;
  box-shadow:0 0 0 3px rgba(45,
103,
178,
.15)!important}
.content .form-control:hover:not(:focus):not(:disabled){
  border-color:var(--color-blue-400)!important}
.content input:disabled,
.content select:disabled,
.content textarea:disabled{
  background-color:var(--color-gray-100)!important;
  color:var(--color-gray-400)!important;
  cursor:not-allowed!important;
  border-color:var(--color-gray-200)!important}
.content :focus-visible{
  outline:2px solid var(--color-blue-400)!important;
  outline-offset:2px!important}
.content a:hover{
  opacity:.85!important}
.content .badge{
  display:inline-block!important;
  padding:3px 10px!important;
  font-size:11px!important;
  font-weight:600!important;
  border-radius:20px!important;
  text-transform:uppercase!important;
  letter-spacing:.5px!important;
  line-height:1.4!important}
.content .badge-success{
  background:#d4edda!important;
  color:#155724!important}
.content .badge-warning{
  background:#fff3cd!important;
  color:#856404!important}
.content .badge-danger{
  background:#f8d7da!important;
  color:#721c24!important}
.content .badge-info{
  background:#d1ecf1!important;
  color:#0c5460!important}
.content .badge-secondary{
  background:var(--color-gray-200)!important;
  color:var(--color-gray-500)!important}
.content .badge-sm{
  padding:2px 7px!important;
  font-size:10px!important}
.content .label{
  font-weight:600!important;
  border-radius:4px!important;
  padding:3px 8px!important;
  font-size:11px!important;
  letter-spacing:.3px!important}
.content .label-success{
  background-color:#28a745!important;
  color:#fff!important}
.content .label-warning{
  background-color:#ffc107!important;
  color:#333!important}
.content .label-danger{
  background-color:#dc3545!important;
  color:#fff!important}
.content .label-info{
  background-color:#17a2b8!important;
  color:#fff!important}
.content .label-primary{
  background-color:var(--color-blue-600)!important;
  color:#fff!important}
.content .label-default{
  background-color:var(--color-gray-300)!important;
  color:var(--color-gray-600)!important}
.content label.required::after{
  content:" *"!important;
  color:var(--color-danger)!important;
  font-weight:700!important}
.content .form-section{
  margin-bottom:1.5rem!important;
  padding-bottom:1.5rem!important;
  border-bottom:1px solid var(--color-gray-200)!important}
.content .form-section:last-child{
  border-bottom:none!important}
.content .form-section-title{
  font-size:1.1rem!important;
  font-weight:600!important;
  color:var(--color-navy-900)!important;
  margin-bottom:1rem!important;
  padding-bottom:.5rem!important;
  border-bottom:2px solid var(--color-blue-600)!important;
  display:inline-block!important}
.content .form-text{
  font-size:.85rem!important;
  color:var(--color-gray-400)!important;
  margin-top:.25rem!important}
.content .form-control.is-valid{
  border-color:#28a745!important}
.content .form-control.is-invalid{
  border-color:var(--color-danger)!important}
.content .field-help{
  display:inline-block!important;
  width:16px!important;
  height:16px!important;
  border-radius:50%!important;
  background:var(--color-gray-300)!important;
  color:var(--color-gray-500)!important;
  font-size:10px!important;
  text-align:center!important;
  line-height:16px!important;
  cursor:help!important;
  margin-left:4px!important}
.content .row-actions{
  display:inline-flex!important;
  gap:4px!important}
.content .row-actions .btn{
  padding:3px 8px!important;
  font-size:12px!important}
.content .row-actions .btn-icon{
  padding:4px 6px!important;
  font-size:13px!important}
.content .btn-danger-sm{
  background:#f8d7da!important;
  color:#721c24!important;
  border:none!important;
  padding:3px 8px!important;
  font-size:12px!important;
  border-radius:var(--radius-sm)!important}
.content .btn-danger-sm:hover{
  background:#f5c6cb!important}
.content th.sortable{
  cursor:pointer!important;
  user-select:none!important}
.content th.sortable::after{
  content:" \2195"!important;
  opacity:.3!important;
  font-size:.8em!important}
.content th.sortable.asc::after{
  content:" \2191"!important;
  opacity:1!important;
  color:var(--color-blue-600)!important}
.content th.sortable.desc::after{
  content:" \2193"!important;
  opacity:1!important;
  color:var(--color-blue-600)!important}
.content .table-search{
  display:block!important;
  width:100%!important;
  max-width:300px!important;
  padding:6px 12px!important;
  font-size:13px!important;
  border:1px solid var(--color-gray-300)!important;
  border-radius:var(--radius-sm)!important;
  margin-bottom:10px!important;
  transition:border-color .15s ease,
box-shadow .15s ease!important}
.content .table-search:focus{
  border-color:var(--color-blue-500)!important;
  box-shadow:0 0 0 3px rgba(45,
103,
178,
.15)!important}
.content .danger-zone{
  border:1px solid #f5c6cb!important;
  border-radius:var(--radius-sm)!important;
  padding:1.25rem!important;
  background:#fff5f5!important;
  margin-top:1.5rem!important}
.content .danger-zone-title{
  color:var(--color-danger)!important;
  font-weight:600!important;
  font-size:1rem!important;
  margin-bottom:.75rem!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important}
.content .danger-zone p{
  color:#721c24!important;
  font-size:.9rem!important;
  margin-bottom:1rem!important}
.toast-success{
  border-left:4px solid #28a745!important;
  box-shadow:0 4px 12px rgba(0,
0,
0,
.1)!important}
.toast-error{
  border-left:4px solid var(--color-danger)!important;
  box-shadow:0 4px 12px rgba(0,
0,
0,
.1)!important}
.toast-warning{
  border-left:4px solid #ffc107!important;
  box-shadow:0 4px 12px rgba(0,
0,
0,
.1)!important}
.toast-info{
  border-left:4px solid var(--color-blue-400)!important;
  box-shadow:0 4px 12px rgba(0,
0,
0,
.1)!important}
.content .panel-heading-icon{
  margin-right:8px!important;
  color:var(--color-navy-900)!important;
  opacity:.8!important}
.content .panel-tools a{
  transition:color .15s ease,
opacity .15s ease!important;
  opacity:.85!important}
.content .panel-tools a:hover{
  opacity:1!important;
  color:var(--color-blue-600)!important}
.content h1,
.content h2,
.content h3,
.content h4,
.content h5{
  color:var(--color-navy-900)!important;
  font-weight:600!important}
.content .empty-state{
  text-align:center!important;
  padding:3rem 1rem!important;
  color:var(--color-gray-400)!important}
.content .empty-state i{
  font-size:3rem!important;
  margin-bottom:1rem!important;
  opacity:.5!important}
.content .empty-state p{
  font-size:1rem!important;
  margin-bottom:0!important}
.tabulator{
  border:1px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm)!important}
.tabulator-header{
  background:var(--color-gray-50)!important;
  border-bottom:2px solid var(--color-gray-200)!important;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0!important}
.tabulator-row:hover{
  background:var(--color-blue-50)!important}
.tabulator-col{
  background:var(--color-gray-50)!important;
  border-right:1px solid var(--color-gray-200)!important}
.tabulator-col-title{
  font-weight:600!important;
  color:var(--color-navy-900)!important}
.table-toolbar{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:10px!important;
  flex-wrap:wrap!important}
.table-search-wrap{
  flex:1!important;
  min-width:200px!important;
  max-width:350px!important}
.tabulator-export-btns{
  display:flex!important;
  gap:6px!important}
.tabulator-export-btns .btn-outline-secondary{
  border:1px solid var(--color-gray-300)!important;
  color:var(--color-gray-500)!important;
  background:0 0!important;
  transition:all .15s ease!important}
.tabulator-export-btns .btn-outline-secondary:hover{
  background:var(--color-gray-50)!important;
  border-color:var(--color-blue-400)!important;
  color:var(--color-blue-600)!important}
.content .pagination>li>a,
.content .pagination>li>span{
  color:var(--color-gray-500)!important;
  border-color:var(--color-gray-200)!important;
  transition:all .15s ease!important}
.content .pagination>li>a:hover{
  background:var(--color-blue-50)!important;
  border-color:var(--color-blue-400)!important;
  color:var(--color-blue-600)!important}
.content .pagination>.active>a{
  background:var(--color-blue-600)!important;
  border-color:var(--color-blue-600)!important}
.content .alert-danger,
.content .errorMessage{
  border-left:4px solid var(--color-danger)!important;
  border-radius:var(--radius-sm)!important}
.content .alert-success,
.content .successMessage{
  border-left:4px solid #28a745!important;
  border-radius:var(--radius-sm)!important}
.content .alert-warning{
  border-left:4px solid #ffc107!important;
  border-radius:var(--radius-sm)!important}
.content .alert-info{
  border-left:4px solid var(--color-blue-400)!important;
  border-radius:var(--radius-sm)!important}
.content .onoffswitch-label{
  border-radius:20px!important;
  transition:background-color .2s ease!important}
.content .onoffswitch-switch{
  border-radius:50%!important;
  transition:all .2s ease!important}
.content .img-thumbnail{
  border-radius:var(--radius-sm)!important;
  border-color:var(--color-gray-200)!important;
  transition:box-shadow .15s ease!important}
.content .img-thumbnail:hover{
  box-shadow:var(--shadow-md)!important}
.content .table-responsive::-webkit-scrollbar{
  height:6px!important}
.content .table-responsive::-webkit-scrollbar-track{
  background:var(--color-gray-100)!important;
  border-radius:3px!important}
.content .table-responsive::-webkit-scrollbar-thumb{
  background:var(--color-gray-300)!important;
  border-radius:3px!important}
.content .table-responsive::-webkit-scrollbar-thumb:hover{
  background:var(--color-gray-400)!important}
section.content>.container-fluid>form>.row>.col-md-3{
  padding-left:4px!important}
.tabulator{
  max-width:100%!important}
.tabulator-cell{
  overflow:hidden!important;
  text-overflow:ellipsis!important}
.tabulator-cell:hover{
  white-space:normal!important;
  overflow:visible!important}

/* ============================================
  TIMINGS PAGE - MOBILE RESPONSIVE FIXES
  Transform table layout to stacked cards
  ============================================ */

/* Tablet breakpoint (max-width: 991px) */
@media (max-width: 991px) {
 /* Target timing tables specifically */
 .content .box-content table[id$="Table"].table-condensed,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed {
   display: block!important;
   border: none!important;
 }
 
 .content .box-content table[id$="Table"].table-condensed tbody,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed tbody {
   display: block!important;
 }
 
 .content .box-content table[id$="Table"].table-condensed tr,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed tr {
   display: flex!important;
   flex-wrap: wrap!important;
   margin-bottom: 8px!important;
   padding: 10px!important;
   border: 1px solid var(--color-gray-200)!important;
   border-radius: var(--radius-sm)!important;
   background: #fff!important;
 }
 
 .content .box-content table[id$="Table"].table-condensed td,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed td {
   display: flex!important;
   align-items: center!important;
   border: none!important;
   padding: 4px 8px!important;
   flex: 0 0 auto!important;
 }
 
 /* Label cells (Open, Close, Delivery) */
 .content .box-content table[id$="Table"].table-condensed td b,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed td b {
   margin-right: 6px!important;
   white-space: nowrap!important;
 }
 
 /* Time inputs - make them full width on mobile */
 .content .box-content table[id$="Table"].table-condensed input[type="time"],
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed input[type="time"] {
   width: 120px!important;
   max-width: 100%!important;
   min-height: 44px!important;
   font-size: 16px!important;
 }
 
 /* Select dropdowns - make them accessible */
 .content .box-content table[id$="Table"].table-condensed select,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed select {
   width: 100px!important;
   min-height: 44px!important;
   font-size: 16px!important;
 }
 
 /* Delete icon */
 .content .box-content table[id$="Table"].table-condensed .fa-times,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed .fa-times {
   margin-left: 8px!important;
   font-size: 18px!important;
 }
 
 /* Add more link */
 .content .box-content .form-group b a {
   display: block!important;
   text-align: center!important;
   padding: 12px!important;
   font-size: 15px!important;
 }
 
 /* Day Off toggle - keep it on the right */
 .content .box-header .box-name p[style*="float:right"] {
   float: none!important;
   display: flex!important;
   align-items: center!important;
   gap: 8px!important;
   margin-top: 8px!important;
 }
}

/* Mobile breakpoint (max-width: 767px) */
@media (max-width: 767px) {
 /* Make table rows stack vertically */
 .content .box-content table[id$="Table"].table-condensed tr,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed tr {
   flex-direction: column!important;
   gap: 8px!important;
   padding: 12px!important;
 }
 
 .content .box-content table[id$="Table"].table-condensed td,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed td {
   width: 100%!important;
   flex: 1 1 100%!important;
   justify-content: flex-start!important;
   padding: 6px 0!important;
 }
 
 /* Time inputs - full width on mobile */
 .content .box-content table[id$="Table"].table-condensed input[type="time"],
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed input[type="time"] {
   width: 100%!important;
   max-width: 100%!important;
   min-height: 48px!important;
   font-size: 16px!important;
   padding: 8px 12px!important;
 }
 
 /* Select dropdowns - full width on mobile */
 .content .box-content table[id$="Table"].table-condensed select,
 .content .box-content table.table-hover.table-striped.table-bordered.table-condensed select {
   width: 100%!important;
   min-height: 48px!important;
   font-size: 16px!important;
   padding: 8px 12px!important;
 }
 
 /* Toggle switch - make it larger for touch */
 .content .box-content .switch {
   transform: scale(1.2)!important;
   display: inline-block!important;
 }
 
 /* Day header box */
 .content .box-header {
   padding: 12px 16px!important;
 }
 
 .content .box-header .box-name b {
   font-size: 16px!important;
   display: block!important;
 }
 
 /* Box content padding */
 .content .box-content {
   padding: 8px!important;
 }
 
 /* Form group spacing */
 .content .box-content .form-group {
   margin-bottom: 12px!important;
 }
 
 /* Save button - full width on mobile */
 .content .form-group .btn-medium.btn.btn-primary {
   width: 100%!important;
   min-height: 48px!important;
   font-size: 16px!important;
   padding: 12px 24px!important;
 }
 
 /* Panel body padding on mobile */
 .content .panel-body {
   padding: 12px!important;
 }
 
 /* Remove horizontal scroll from table-responsive on timings */
 .content .table-responsive {
   overflow-x: visible!important;
   width: 100%!important;
 }
 
 /* Fix content area padding */
 .content > .container-fluid > .row > [class*="col-"] {
   padding-left: 12px!important;
   padding-right: 12px!important;
 }
}

/* Toggle switches - migrated from style102.css */
/* The box around the slider */
.switch {
 position: relative;
 display: inline-block;
 width: 50px;
 height: 20px;
 margin: 0px 0px 0px 5px;
}

/* Hide default HTML checkbox */
.switch input {
 opacity: 0;
 width: 0;
 height: 0;
}

/* The slider */
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 -webkit-transition: .4s;
 transition: .4s;
}

.slider:before {
 position: absolute;
 content: "";
 height: 16px;
 width: 16px;
 left: 4px;
 bottom: 2px;
 background-color: white;
 -webkit-transition: .4s;
 transition: .4s;
}

input:checked + .slider {
 background-color: #2196F3;
}

input:focus + .slider {
 box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
 -webkit-transform: translateX(26px);
 -ms-transform: translateX(26px);
 transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
 border-radius: 34px;
}

.slider.round:before {
 border-radius: 50%;
}