/* Emerald POS Premium Blue V3
 * Single visual layer for the original UltimatePOS/AdminLTE interface.
 * Original Source Sans Pro, Font Awesome 5, Ionicons and Glyphicons are retained.
 */
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff2") format("woff2"),
       url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.woff") format("woff"),
       url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff2") format("woff2"),
       url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.woff") format("woff"),
       url("../fonts/vendor/@fortawesome/fontawesome-free/webfa-brands-400.ttf") format("truetype");
}
@font-face {
  font-family: Ionicons;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/ionicons.ttf") format("truetype");
}
@font-face {
  font-family: "Glyphicons Halflings";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
       url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
       url("../fonts/glyphicons-halflings-regular.ttf") format("truetype");
}

:root {
  --ep-primary: #1677c8;
  --ep-primary-2: #2497d0;
  --ep-primary-dark: #0d4f8b;
  --ep-navy: #123b66;
  --ep-navy-2: #0c2c4d;
  --ep-sky: #dceeff;
  --ep-sky-2: #eef7ff;
  --ep-page: #f3f8fc;
  --ep-card: #ffffff;
  --ep-text: #1e293b;
  --ep-muted: #64748b;
  --ep-border: #d5e2ec;
  --ep-border-strong: #bfd3e2;
  --ep-success: #138a67;
  --ep-warning: #d08a21;
  --ep-danger: #c94a55;
  --ep-purple: #6658b8;
  --ep-radius: 10px;
  --ep-shadow-sm: 0 4px 14px rgba(18,59,102,.07);
  --ep-shadow: 0 12px 30px rgba(18,59,102,.10);
}

/* Original typography and icon fonts. Do not override icons with the text font. */
html, body, body .wrapper, body input, body textarea, body select, body button,
body .form-control, body .select2-container, body .dropdown-menu,
body .popover, body .tooltip, body .modal, body .table {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}
.fa, .fas { font-family: "Font Awesome 5 Free" !important; font-weight: 900 !important; }
.far { font-family: "Font Awesome 5 Free" !important; font-weight: 400 !important; }
.fab { font-family: "Font Awesome 5 Brands" !important; }
.ion { font-family: Ionicons !important; }
.glyphicon { font-family: "Glyphicons Halflings" !important; }

html, body { min-height: 100%; background: var(--ep-page) !important; color: var(--ep-text); }
body, .wrapper, .content-wrapper, .right-side { background: var(--ep-page) !important; }
a { color: var(--ep-primary-dark); }
a:hover, a:focus { color: var(--ep-primary); }

/* Header */
.main-header { box-shadow: 0 4px 18px rgba(12,44,77,.18); }
.main-header .navbar {
  background: linear-gradient(105deg, var(--ep-primary-dark) 0%, var(--ep-primary) 58%, var(--ep-primary-2) 100%) !important;
  border: 0 !important;
  min-height: 52px;
}
.main-header .logo {
  background: linear-gradient(120deg, var(--ep-navy-2), var(--ep-navy)) !important;
  color: #fff !important;
  border-right: 1px solid rgba(255,255,255,.12) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  letter-spacing: .15px;
  min-height: 52px;
  line-height: 52px;
}
.main-header .logo:hover { background: var(--ep-navy-2) !important; }
.main-header .navbar .sidebar-toggle,
.main-header .navbar .nav > li > a { color: #fff !important; }
.main-header .navbar .sidebar-toggle { padding: 16px 17px; }
.main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav > .open > a { background: rgba(255,255,255,.12) !important; }
.main-header .navbar .btn {
  min-height: 32px;
  border-radius: 7px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.main-header .navbar .btn:hover { background: rgba(255,255,255,.22) !important; }
.main-header .navbar .btn-danger { background: rgba(176,35,48,.78) !important; }
.navbar-nav > .user-menu > .dropdown-menu { border-radius: 10px; overflow: hidden; box-shadow: var(--ep-shadow); }
.navbar-nav > .user-menu > .dropdown-menu > .user-header {
  background: linear-gradient(135deg, var(--ep-sky), #fff) !important;
  color: var(--ep-navy) !important;
}
.navbar-nav > .user-menu > .dropdown-menu > .user-header > p { color: var(--ep-navy) !important; }

/* Sidebar: stronger professional contrast */
.main-sidebar, .left-side {
  background: linear-gradient(180deg, var(--ep-navy-2) 0%, #102f50 100%) !important;
  border-right: 0 !important;
  box-shadow: 3px 0 16px rgba(12,44,77,.10);
}
.sidebar { padding-top: 8px !important; }
.sidebar-menu > li.header {
  background: transparent !important;
  color: #7fa8ca !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .8px;
  padding: 17px 16px 6px !important;
}
.sidebar-menu > li > a {
  color: #dce9f5 !important;
  margin: 2px 9px;
  padding: 10px 12px !important;
  border-left: 0 !important;
  border-radius: 7px;
  font-size: 14px;
  transition: background .16s ease, color .16s ease;
}
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .ion {
  width: 22px;
  color: #8fc6ee !important;
  text-align: center;
}
.sidebar-menu > li > a:hover { background: rgba(105,183,235,.12) !important; color: #fff !important; }
.sidebar-menu > li.active > a {
  background: linear-gradient(105deg, rgba(36,151,208,.95), rgba(22,119,200,.95)) !important;
  color: #fff !important;
  box-shadow: 0 7px 16px rgba(0,0,0,.16);
}
.sidebar-menu > li.active > a > .fa,
.sidebar-menu > li.active > a > .fas,
.sidebar-menu > li.active > a > .far,
.sidebar-menu > li.active > a > .ion { color: #fff !important; }
.sidebar-menu .treeview-menu {
  margin: 0 9px 5px !important;
  padding: 5px 0 !important;
  background: rgba(0,0,0,.15) !important;
  border-radius: 0 0 7px 7px;
}
.sidebar-menu .treeview-menu > li > a {
  color: #b8cfe2 !important;
  padding: 8px 12px 8px 38px !important;
  font-size: 13px;
}
.sidebar-menu .treeview-menu > li.active > a,
.sidebar-menu .treeview-menu > li > a:hover { color: #fff !important; background: rgba(255,255,255,.06) !important; }
.sidebar-menu li > a > .pull-right-container { top: 50% !important; margin-top: -8px !important; }

/* Page structure */
.content-header { padding: 18px 22px 8px !important; }
.content-header > h1 {
  color: var(--ep-navy) !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -.15px;
}
.content-header > h1 > small { color: var(--ep-muted) !important; font-size: 13px !important; }
.content { padding: 12px 22px 26px !important; }
.content-custom { margin-top: -195px !important; }
.content-header-custom {
  background: linear-gradient(110deg, var(--ep-primary-dark), var(--ep-primary) 64%, var(--ep-primary-2)) !important;
  padding: 22px 22px 205px !important;
}
.content-header-custom h1, .content-header-custom small, .content-header-custom a { color: #fff !important; }

/* Cards */
.box, .info-box, .small-box, .modal-content, .panel {
  border: 1px solid var(--ep-border) !important;
  border-radius: var(--ep-radius) !important;
  box-shadow: var(--ep-shadow-sm) !important;
}
.box { background: #fff !important; margin-bottom: 18px; overflow: hidden; }
.box.box-primary, .box.box-info, .box.box-success, .box.box-warning, .box.box-danger { border-top: 3px solid var(--ep-primary) !important; }
.box-header { padding: 13px 16px !important; border-bottom: 1px solid #e7eef4 !important; background: #fff !important; }
.box-header .box-title { color: var(--ep-navy) !important; font-size: 16px !important; font-weight: 600 !important; }
.box-body { padding: 16px !important; }
.box-footer { padding: 12px 16px !important; background: #f8fbfd !important; border-top: 1px solid var(--ep-border) !important; }

/* Dashboard cards */
.row-custom { margin-left: -8px !important; margin-right: -8px !important; }
.col-custom { padding-left: 8px !important; padding-right: 8px !important; }
.info-box-new-style, .info-box {
  min-height: 100px !important;
  background: #fff !important;
  overflow: hidden;
  position: relative;
}
.info-box-new-style:before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--ep-primary), var(--ep-primary-2));
}
.info-box-icon {
  width: 68px !important;
  height: 68px !important;
  line-height: 68px !important;
  margin: 15px 0 0 15px;
  border-radius: 10px !important;
  background: var(--ep-sky-2) !important;
  border: 1px solid #c8e1f5;
  color: var(--ep-primary) !important;
  font-size: 29px !important;
}
.info-box-icon.bg-aqua, .info-box-icon.bg-green, .info-box-icon.bg-yellow,
.info-box-icon.bg-red, .info-box-icon.bg-blue, .info-box-icon.bg-purple {
  background: var(--ep-sky-2) !important;
  color: var(--ep-primary) !important;
}
.info-box-content { margin-left: 96px !important; padding: 22px 12px 10px !important; }
.info-box-text {
  color: var(--ep-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .45px;
  line-height: 1.25;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: initial !important;
}
.info-box-number { color: var(--ep-text) !important; font-size: 19px !important; font-weight: 600 !important; margin-top: 5px; }

/* Forms */
label { color: #33465a !important; font-weight: 600 !important; }
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.input-group-addon {
  min-height: 36px;
  border-color: var(--ep-border-strong) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.form-control { background: #fff !important; color: var(--ep-text) !important; }
.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--ep-primary) !important;
  box-shadow: 0 0 0 3px rgba(22,119,200,.12) !important;
}
.input-group-addon { background: #edf5fb !important; color: var(--ep-primary-dark) !important; }
.input-group-addon:first-child { border-radius: 7px 0 0 7px !important; }
.input-group-addon:last-child { border-radius: 0 7px 7px 0 !important; }
.input-group .form-control:first-child { border-radius: 7px 0 0 7px !important; }
.input-group .form-control:last-child { border-radius: 0 7px 7px 0 !important; }
.help-block, .text-muted { color: var(--ep-muted) !important; }

/* Buttons */
.btn {
  border-radius: 7px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.btn:hover, .btn:focus { transform: none !important; box-shadow: 0 4px 12px rgba(18,59,102,.13) !important; }
.btn-primary, .bg-blue, .label-primary, .bg-light-blue {
  background: var(--ep-primary) !important;
  border-color: var(--ep-primary-dark) !important;
  color: #fff !important;
}
.btn-primary:hover { background: var(--ep-primary-dark) !important; }
.btn-success, .bg-green { background: var(--ep-success) !important; border-color: #0d7456 !important; color: #fff !important; }
.btn-info, .bg-aqua { background: #2f86b7 !important; border-color: #246d99 !important; color: #fff !important; }
.btn-warning, .bg-yellow { background: var(--ep-warning) !important; border-color: #b87413 !important; color: #fff !important; }
.btn-danger, .bg-red { background: var(--ep-danger) !important; border-color: #ad3641 !important; color: #fff !important; }
.bg-purple { background: var(--ep-purple) !important; color: #fff !important; }
.btn-default { background: #fff !important; color: #33465a !important; border-color: var(--ep-border-strong) !important; }
.btn-flat { border-radius: 7px !important; }

/* Tables and DataTables */
.table-responsive { border: 0 !important; border-radius: 8px; }
.table { background: #fff !important; margin-bottom: 0; }
.table > thead > tr > th {
  background: #e9f3fb !important;
  color: var(--ep-navy) !important;
  border-bottom: 1px solid #c9dbe9 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .18px;
  padding: 10px 9px !important;
  vertical-align: middle !important;
  white-space: nowrap;
}
.table > tbody > tr > td { border-color: #e5edf3 !important; padding: 9px !important; vertical-align: middle !important; }
.table-striped > tbody > tr:nth-of-type(odd) { background: #fbfdff !important; }
.table-hover > tbody > tr:hover { background: #eef7ff !important; }
.dataTables_wrapper .dt-buttons { margin-bottom: 8px; }
.dataTables_wrapper .dt-buttons .btn { margin-right: 4px; margin-bottom: 4px; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--ep-border-strong) !important;
  border-radius: 7px !important;
  min-height: 34px;
  padding: 5px 9px;
  background: #fff;
}
.dataTables_wrapper .dataTables_empty { padding: 28px 12px !important; color: var(--ep-muted) !important; background: #fbfdff !important; }
.pagination > li > a, .pagination > li > span { color: var(--ep-primary-dark) !important; border-color: var(--ep-border) !important; }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover { background: var(--ep-primary) !important; border-color: var(--ep-primary) !important; color: #fff !important; }

/* Tabs, dropdowns, modal, alerts */
.nav-tabs { border-bottom: 1px solid var(--ep-border) !important; }
.nav-tabs > li > a { color: var(--ep-muted) !important; font-weight: 600 !important; border-radius: 7px 7px 0 0 !important; }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover {
  color: var(--ep-primary-dark) !important;
  border-top: 3px solid var(--ep-primary) !important;
  background: #fff !important;
}
.dropdown-menu { border: 1px solid var(--ep-border) !important; border-radius: 8px !important; box-shadow: var(--ep-shadow) !important; }
.dropdown-menu > li > a { padding: 8px 14px !important; color: #33465a !important; }
.dropdown-menu > li > a:hover { background: var(--ep-sky-2) !important; color: var(--ep-primary-dark) !important; }
.modal-content { border: 0 !important; overflow: hidden; box-shadow: 0 20px 55px rgba(12,44,77,.24) !important; }
.modal-header { padding: 14px 18px !important; background: linear-gradient(90deg, #edf6fd, #fff) !important; border-bottom: 1px solid var(--ep-border) !important; }
.modal-title { color: var(--ep-navy) !important; font-weight: 600 !important; }
.modal-body { padding: 18px !important; }
.modal-footer { padding: 12px 18px !important; background: #f7fafc !important; border-top: 1px solid var(--ep-border) !important; }
.alert { border-radius: 8px !important; }
.sweet-alert, .swal2-popup { border-radius: 12px !important; box-shadow: 0 22px 60px rgba(12,44,77,.24) !important; }
.sweet-alert h2, .swal2-title { color: var(--ep-navy) !important; }

/* POS workspace */
body.lockscreen { background: #eaf2f8 !important; }
.pos-header {
  background: linear-gradient(105deg, var(--ep-navy-2), var(--ep-primary-dark) 62%, var(--ep-primary)) !important;
  color: #fff !important;
  min-height: 54px;
  box-shadow: 0 3px 14px rgba(12,44,77,.20);
}
.pos-header p, .pos-header strong, .pos-header .curr_datetime, .pos-header .text-muted { color: #fff !important; }
.pos-header .btn { min-width: 34px; min-height: 31px; margin: 8px 3px !important; border: 1px solid rgba(255,255,255,.28) !important; background: rgba(255,255,255,.12) !important; color: #fff !important; }
.pos-header .btn:hover { background: rgba(255,255,255,.22) !important; }
.pos-header .btn-danger { background: rgba(184,47,60,.84) !important; }
.pos-header .bg-yellow { background: rgba(199,132,28,.88) !important; }
.pos-header .bg-purple { background: rgba(98,84,174,.88) !important; }
#add_pos_sell_form .box { border-radius: 9px !important; }
#pos_table thead th { background: #dcecff !important; }
#pos_table tbody td { background: #fff !important; }
.pos-form-actions, .pos_form_totals, .product_box, .product_list { border-radius: 8px !important; }
.product_box { background: #fff !important; border: 1px solid var(--ep-border) !important; box-shadow: 0 3px 10px rgba(18,59,102,.06) !important; }
.product_box:hover { border-color: var(--ep-primary) !important; box-shadow: 0 7px 16px rgba(18,59,102,.12) !important; }
.pos-form-actions { background: #f7fafc !important; border-top: 1px solid var(--ep-border) !important; }
.pos-form-actions .btn { min-height: 40px; }
.pos-form-actions .btn-primary, .pos-form-actions .btn-success { background: var(--ep-primary) !important; border-color: var(--ep-primary-dark) !important; }
.pos-form-actions .btn-danger { background: var(--ep-danger) !important; }
#total_payable, .total_payable, .pos-total { background: var(--ep-navy) !important; color: #fff !important; border-radius: 8px !important; }
.popover { border: 1px solid var(--ep-border) !important; border-radius: 8px !important; box-shadow: var(--ep-shadow) !important; }

/* Product, purchase and contact pages */
.filter-box, .product_list, .contact_modal .modal-content { border-radius: 10px !important; }
.fileinput-button, .input-group-btn .btn { border-radius: 7px !important; }

/* Footer */
.main-footer { background: #fff !important; border-top: 1px solid var(--ep-border) !important; color: var(--ep-muted) !important; padding: 10px 18px !important; }
.main-footer .btn { background: #edf5fb !important; border-color: var(--ep-border) !important; color: var(--ep-primary-dark) !important; }

/* Login */
.login-page, .register-page {
  background: radial-gradient(circle at 18% 18%, rgba(36,151,208,.22), transparent 32%),
              radial-gradient(circle at 83% 78%, rgba(22,119,200,.20), transparent 30%),
              linear-gradient(135deg, var(--ep-navy-2), var(--ep-primary-dark) 58%, var(--ep-primary)) !important;
}
.login-box-body, .register-box-body { border-radius: 12px !important; box-shadow: 0 24px 65px rgba(6,32,57,.28) !important; padding: 26px !important; }
.login-logo a, .register-logo a { color: #fff !important; font-weight: 600 !important; }

/* Responsiveness */
@media (max-width: 1199px) {
  .content { padding-left: 15px !important; padding-right: 15px !important; }
  .info-box-content { padding-right: 8px !important; }
}
@media (max-width: 767px) {
  .content-header { padding: 14px 13px 6px !important; }
  .content { padding: 10px 12px 20px !important; }
  .content-header-custom { padding: 18px 14px 190px !important; }
  .content-custom { margin-top: -180px !important; }
  .main-header .navbar { min-height: 50px; }
  .info-box-icon { width: 62px !important; height: 62px !important; line-height: 62px !important; }
  .info-box-content { margin-left: 88px !important; }
  .modal-dialog { margin: 10px !important; }
  .dataTables_wrapper .dt-buttons { float: none !important; }
  .pos-header .col-md-6 { width: 100%; }
}
@media print {
  body, .wrapper, .content-wrapper { background: #fff !important; }
  .box, .info-box, .table { box-shadow: none !important; }
}

/* Dashboard chart refinement */
.content-custom .chartjs-render-monitor,
.content-custom canvas { max-height: 320px !important; }
.content-custom .box-body > div[id*="chart"] { min-height: 220px; }

/* Clear, non-cartoon icon presentation */
.info-box-icon i, .btn i, .sidebar-menu i { text-shadow: none !important; filter: none !important; }
.btn i { vertical-align: -1px; }