/* ==========================================
   UltimatePOS Orange & Navy Theme
   Primary: #FF6B1A
   Secondary: #1E2E5C
========================================== */

:root{
    --primary:#FF6B1A;
    --primary-dark:#E85A0D;
    --secondary:#1E2E5C;
}

/* Header */
.main-header .navbar{
    background:#1E2E5C !important;
}

.main-header .logo{
    background:#16213E !important;
    color:#fff !important;
}

.main-header .logo:hover{
    background:#16213E !important;
}

/* Sidebar */

.skin-blue-light .main-sidebar,
.skin-blue .main-sidebar{
    background:#1E2E5C !important;
}

.skin-blue-light .sidebar-menu>li>a,
.skin-blue .sidebar-menu>li>a{
    color:#fff !important;
}

.skin-blue-light .sidebar-menu>li:hover>a,
.skin-blue .sidebar-menu>li:hover>a{
    background:#FF6B1A !important;
    color:#fff !important;
}

.skin-blue-light .sidebar-menu>li.active>a,
.skin-blue .sidebar-menu>li.active>a{
    background:#FF6B1A !important;
    color:#fff !important;
    border-left-color:#FFD2B4 !important;
}

.skin-blue-light .treeview-menu,
.skin-blue .treeview-menu{
    background:#16213E !important;
}

.skin-blue-light .treeview-menu>li>a,
.skin-blue .treeview-menu>li>a{
    color:#ddd !important;
}

.skin-blue-light .treeview-menu>li.active>a,
.skin-blue-light .treeview-menu>li>a:hover,
.skin-blue .treeview-menu>li.active>a,
.skin-blue .treeview-menu>li>a:hover{
    color:#fff !important;
    background:#FF6B1A !important;
}

/* Buttons */

.btn-primary{
    background:#FF6B1A !important;
    border-color:#FF6B1A !important;
}

.btn-primary:hover{
    background:#E85A0D !important;
    border-color:#E85A0D !important;
}

.btn-success{
    background:#22C55E !important;
}

.btn-info{
    background:#1E2E5C !important;
    border-color:#1E2E5C !important;
}

/* Boxes */

.box.box-primary{
    border-top:3px solid #FF6B1A !important;
}

.box.box-info{
    border-top:3px solid #1E2E5C !important;
}

/* Links */

a{
    color:#FF6B1A;
}

a:hover{
    color:#E85A0D;
}

/* Pagination */

.pagination>.active>a,
.pagination>.active>span{
    background:#FF6B1A !important;
    border-color:#FF6B1A !important;
}

/* Labels */

.label-primary{
    background:#FF6B1A !important;
}

.label-info{
    background:#1E2E5C !important;
}

/* Tables */

.table>thead{
    background:#1E2E5C;
    color:#fff;
}

/* Nav Tabs */

.nav-tabs>li.active>a{
    border-top:3px solid #FF6B1A !important;
}

/* Inputs */

.form-control:focus{
    border-color:#FF6B1A;
    box-shadow:0 0 6px rgba(255,107,26,.25);
}

/* Select2 */

.select2-container--default .select2-results__option--highlighted{
    background:#FF6B1A !important;
}

/* Checkboxes */

.icheckbox_square-blue.checked{
    background-color:#FF6B1A !important;
}

/* Dropdown */

.dropdown-menu>.active>a{
    background:#FF6B1A !important;
}

/* Progress */

.progress-bar{
    background:#FF6B1A !important;
}

/* Small boxes */

.small-box.bg-aqua{
    background:#FF6B1A !important;
}

.small-box.bg-green{
    background:#22C55E !important;
}

.small-box.bg-yellow{
    background:#F59E0B !important;
}

.small-box.bg-red{
    background:#EF4444 !important;
}
/* Registration page background */
body {
    background-color: #FF6B1A !important;
}
/* =========================================================
   LEKAJHOKA ORANGE THEME
   Main Orange: #FF6B1A
   Hover Orange: #E85A0D
   ========================================================= */


/* ---------- MAIN PAGE BACKGROUND ---------- */

html,
body {
    background-color: #FF6B1A !important;
}


/* ---------- REGISTRATION PAGE BACKGROUND AREAS ---------- */

.content,
.content-wrapper,
.register-page,
.register-container,
.registration-container,
.business-register,
.register-background {
    background-color: #FF6B1A !important;
}


/* ---------- ALL SUCCESS BUTTONS ---------- */

.btn-success,
.tw-dw-btn-success {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.tw-dw-btn-success:hover,
.tw-dw-btn-success:focus,
.tw-dw-btn-success:active {
    background-color: #E85A0D !important;
    border-color: #E85A0D !important;
    color: #FFFFFF !important;
}


/* ---------- TAILWIND / DAISYUI SUCCESS COLOR ---------- */

.tw-dw-btn-success {
    --btn-color: #FF6B1A !important;
}


/* ---------- PRIMARY BUTTONS ---------- */

.btn-primary,
.tw-dw-btn-primary {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.tw-dw-btn-primary:hover,
.tw-dw-btn-primary:focus,
.tw-dw-btn-primary:active {
    background-color: #E85A0D !important;
    border-color: #E85A0D !important;
    color: #FFFFFF !important;
}


/* ---------- NEXT / WIZARD BUTTON ---------- */

button.next,
a.next,
.next,
#next,
.btn-next,
.next-step,
button[type="submit"] {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}

button.next:hover,
a.next:hover,
.next:hover,
#next:hover,
.btn-next:hover,
.next-step:hover,
button[type="submit"]:hover {
    background-color: #E85A0D !important;
    border-color: #E85A0D !important;
    color: #FFFFFF !important;
}


/* ---------- FILE BROWSE BUTTON ---------- */

.fileinput-upload,
.fileinput-browse,
.btn-file,
.fileinput .btn {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}

.fileinput-upload:hover,
.fileinput-browse:hover,
.btn-file:hover,
.fileinput .btn:hover {
    background-color: #E85A0D !important;
    border-color: #E85A0D !important;
}


/* ---------- ACTIVE WIZARD STEP ---------- */

.steps .active,
.steps li.active,
.steps li.active a,
.steps .active a,
.wizard .steps .active,
.wizard .steps li.active,
.wizard .steps li.active a,
.wizard-step.active,
.step.active {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}


/* ---------- WIZARD STEP TEXT ---------- */

.steps .active *,
.steps li.active *,
.wizard .steps .active *,
.wizard .steps li.active * {
    color: #FFFFFF !important;
}


/* ---------- WIZARD HOVER ---------- */

.steps li:hover,
.steps li:hover a,
.wizard .steps li:hover,
.wizard .steps li:hover a {
    background-color: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
}


/* ---------- FORM INPUT FOCUS ---------- */

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.tw-dw-input:focus {
    border-color: #FF6B1A !important;
    box-shadow: 0 0 0 1px #FF6B1A !important;
}


/* ---------- FORM ICONS ---------- */

.input-group-addon,
.input-group-text {
    color: #FF6B1A !important;
}

.form-group .fa,
.form-group .fas,
.form-group .far,
.form-group .fab {
    color: #FF6B1A;
}


/* ---------- LINKS ---------- */

a:hover {
    color: #E85A0D;
}


/* ---------- PRIMARY BOX ---------- */

.box.box-primary {
    border-top-color: #FF6B1A !important;
}


/* ---------- PROGRESS / ACTIVE ELEMENTS ---------- */

.progress-bar,
.bg-primary {
    background-color: #FF6B1A !important;
}


/* ---------- SELECTION ---------- */

::selection {
    background: #FF6B1A;
    color: #FFFFFF;
}
/* ============================================================
   LEKAJHOKA PROFESSIONAL ORANGE + NAVY THEME
   ============================================================ */

:root {
    /* BRAND */
    --brand-orange: #F97316;
    --brand-orange-hover: #EA580C;
    --brand-orange-light: #FFF3E8;

    /* NAVY */
    --brand-navy: #0F2747;
    --brand-navy-light: #173B63;
    --brand-navy-dark: #091B33;

    /* BACKGROUNDS */
    --brand-page-bg: #FFF7F0;
    --brand-white: #FFFFFF;

    /* TEXT */
    --brand-text: #172033;
    --brand-text-light: #64748B;

    /* BORDER */
    --brand-border: #E2E8F0;
}


/* ============================================================
   MAIN PAGE
   ============================================================ */

html {
    background: var(--brand-page-bg) !important;
}

body {
    background: var(--brand-page-bg) !important;
    color: var(--brand-text) !important;
}

.content,
.content-wrapper {
    background: var(--brand-page-bg) !important;
}


/* ============================================================
   NAVIGATION / HEADER
   ============================================================ */

.navbar,
.main-header,
.navbar-static-top,
.main-header .navbar {
    background: var(--brand-navy) !important;
    border-color: var(--brand-navy) !important;
}

.navbar a,
.main-header a {
    color: #FFFFFF !important;
}

.navbar a:hover,
.main-header a:hover {
    color: var(--brand-orange) !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.main-sidebar,
.left-side,
.sidebar {
    background: var(--brand-navy) !important;
}

.main-sidebar .sidebar-menu > li > a,
.sidebar-menu > li > a {
    color: #FFFFFF !important;
}

.main-sidebar .sidebar-menu > li > a:hover,
.sidebar-menu > li > a:hover {
    background: var(--brand-navy-light) !important;
    color: #FFFFFF !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: var(--brand-orange) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   PRIMARY BUTTONS
   ============================================================ */

.btn-primary,
.tw-dw-btn-primary {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.tw-dw-btn-primary:hover,
.tw-dw-btn-primary:focus,
.tw-dw-btn-primary:active {
    background: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   SUCCESS BUTTONS
   ============================================================ */

.btn-success,
.tw-dw-btn-success {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.tw-dw-btn-success:hover,
.tw-dw-btn-success:focus,
.tw-dw-btn-success:active {
    background: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   TAILWIND / DAISYUI SUCCESS VARIABLE
   ============================================================ */

.tw-dw-btn-success {
    --btn-color: var(--brand-orange) !important;
}


/* ============================================================
   NEXT BUTTON
   ============================================================ */

.next,
.next-step,
.btn-next,
button.next,
button[type="submit"] {
    background: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
}

.next:hover,
.next-step:hover,
.btn-next:hover,
button.next:hover,
button[type="submit"]:hover {
    background: var(--brand-orange-hover) !important;
    background-color: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   FILE BROWSE BUTTON
   ============================================================ */

.btn-file,
.fileinput-browse,
.fileinput-upload,
.fileinput .btn {
    background: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
}

.btn-file:hover,
.fileinput-browse:hover,
.fileinput-upload:hover,
.fileinput .btn:hover {
    background: var(--brand-orange-hover) !important;
    border-color: var(--brand-orange-hover) !important;
}


/* ============================================================
   ACTIVE WIZARD / REGISTRATION STEP
   ============================================================ */

.steps li.active,
.steps li.active a,
.steps .active,
.steps .active a,
.wizard .steps li.active,
.wizard .steps li.active a,
.wizard-step.active,
.step.active {
    background: var(--brand-orange) !important;
    background-color: var(--brand-orange) !important;
    border-color: var(--brand-orange) !important;
    color: #FFFFFF !important;
}


/* ACTIVE STEP TEXT */

.steps li.active *,
.steps .active *,
.wizard .steps li.active * {
    color: #FFFFFF !important;
}


/* ============================================================
   WIZARD HOVER
   ============================================================ */

.steps li:hover,
.steps li:hover a,
.wizard .steps li:hover,
.wizard .steps li:hover a {
    background: var(--brand-orange-light) !important;
    border-color: var(--brand-orange) !important;
}


/* ============================================================
   FORM INPUTS
   ============================================================ */

.form-control,
input,
select,
textarea {
    border-color: var(--brand-border);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.tw-dw-input:focus {
    border-color: var(--brand-orange) !important;
    box-shadow: 0 0 0 1px var(--brand-orange) !important;
}


/* ============================================================
   FORM ICONS
   ============================================================ */

.input-group-addon,
.input-group-text {
    color: var(--brand-orange) !important;
}

.form-group .fa,
.form-group .fas,
.form-group .far,
.form-group .fab,
.input-group-addon i,
.input-group-text i {
    color: var(--brand-orange) !important;
}


/* ============================================================
   FORM LABELS
   ============================================================ */

.form-group label {
    color: var(--brand-navy) !important;
}


/* ============================================================
   LINKS
   ============================================================ */

a {
    color: var(--brand-navy);
}

a:hover {
    color: var(--brand-orange) !important;
}


/* ============================================================
   WHITE CARDS / BOXES
   ============================================================ */

.box,
.card,
.tw-bg-white {
    background: #FFFFFF !important;
}


/* ============================================================
   PRIMARY BOX BORDER
   ============================================================ */

.box.box-primary {
    border-top-color: var(--brand-orange) !important;
}


/* ============================================================
   PAGE BACKGROUND - LIGHT ORANGE
   ============================================================ */

.register-page,
.register-container,
.registration-container,
.business-register {
    background: var(--brand-page-bg) !important;
}


/* ============================================================
   COMMON BLUE TAILWIND BACKGROUNDS
   Convert registration blue areas to NAVY
   ============================================================ */

.tw-bg-blue-500 {
    background-color: var(--brand-navy) !important;
}

.tw-bg-blue-600 {
    background-color: var(--brand-navy) !important;
}

.tw-bg-blue-700 {
    background-color: var(--brand-navy-dark) !important;
}

.tw-bg-indigo-500 {
    background-color: var(--brand-navy) !important;
}

.tw-bg-indigo-600 {
    background-color: var(--brand-navy) !important;
}

.tw-bg-indigo-700 {
    background-color: var(--brand-navy-dark) !important;
}


/* ============================================================
   COMMON PURPLE BACKGROUNDS
   ============================================================ */

.tw-bg-purple-500,
.tw-bg-purple-600,
.tw-bg-purple-700 {
    background-color: var(--brand-navy) !important;
}


/* ============================================================
   PRIMARY BLUE ELEMENTS
   ============================================================ */

.bg-primary {
    background-color: var(--brand-orange) !important;
}

.text-primary {
    color: var(--brand-orange) !important;
}


/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress-bar {
    background-color: var(--brand-orange) !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer,
.main-footer {
    background: var(--brand-navy) !important;
    background-color: var(--brand-navy) !important;
    color: #FFFFFF !important;
    border-color: var(--brand-navy) !important;
}

footer a,
.main-footer a {
    color: #FFFFFF !important;
}

footer a:hover,
.main-footer a:hover {
    color: var(--brand-orange) !important;
}


/* ============================================================
   BLUE/PURPLE FOOTER OR BOTTOM SECTIONS
   ============================================================ */

.footer,
.page-footer,
.bottom-footer,
.registration-footer {
    background: var(--brand-navy) !important;
    background-color: var(--brand-navy) !important;
}


/* ============================================================
   DROPDOWN
   ============================================================ */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--brand-orange-light) !important;
    color: var(--brand-navy) !important;
}


/* ============================================================
   CHECKBOX / RADIO
   ============================================================ */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--brand-orange) !important;
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    background: var(--brand-orange) !important;
    color: #FFFFFF !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar-thumb {
    background: var(--brand-navy) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-orange) !important;
}
/* ============================================================
   LEKAJHOKA OFFICIAL BRAND THEME
   Based on LEKAJHOKA Logo
   ============================================================ */

:root {

    /* ===============================
       OFFICIAL BRAND COLORS
       =============================== */

    --lk-navy-dark: #101D3A;
    --lk-navy: #17284E;
    --lk-navy-light: #1E3561;

    --lk-orange: #F2622A;
    --lk-orange-hover: #E84F1D;
    --lk-orange-light: #FFF1EB;

    /* ===============================
       SYSTEM COLORS
       =============================== */

    --lk-page-bg: #F8FAFC;
    --lk-white: #FFFFFF;

    --lk-text: #17284E;
    --lk-text-secondary: #64748B;

    --lk-border: #E2E8F0;
}


/* ============================================================
   MAIN PAGE
   ============================================================ */

html {
    background: #F8FAFC !important;
}

body {
    background: #F8FAFC !important;
    color: #17284E !important;
}

.content,
.content-wrapper {
    background: #F8FAFC !important;
}


/* ============================================================
   HEADER
   ============================================================ */

.main-header,
.navbar,
.main-header .navbar {
    background: #17284E !important;
    border-color: #17284E !important;
}

.main-header a,
.navbar a {
    color: #FFFFFF !important;
}

.main-header a:hover,
.navbar a:hover {
    color: #F2622A !important;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.main-sidebar,
.left-side,
.sidebar {
    background: #17284E !important;
}

.main-sidebar .sidebar-menu > li > a,
.sidebar-menu > li > a {
    color: #FFFFFF !important;
}

.main-sidebar .sidebar-menu > li > a:hover,
.sidebar-menu > li > a:hover {
    background: #1E3561 !important;
    color: #FFFFFF !important;
}

.sidebar-menu > li.active > a,
.sidebar-menu > li.menu-open > a {
    background: #F2622A !important;
    color: #FFFFFF !important;
}


/* ============================================================
   TOP RIGHT - SIGN IN / LANGUAGE
   ============================================================ */

.header-links a,
.top-links a,
.sign-in,
.language-selector {
    color: #17284E !important;
}

.header-links a:hover,
.top-links a:hover,
.sign-in:hover,
.language-selector:hover {
    color: #F2622A !important;
}


/* ============================================================
   CARDS / BOXES
   ============================================================ */

.box,
.card,
.tw-bg-white {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}


/* ============================================================
   PRIMARY BUTTON
   ============================================================ */

.btn-primary,
.tw-dw-btn-primary {
    background: #F2622A !important;
    border-color: #F2622A !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.tw-dw-btn-primary:hover,
.tw-dw-btn-primary:focus,
.tw-dw-btn-primary:active {
    background: #E84F1D !important;
    border-color: #E84F1D !important;
    color: #FFFFFF !important;
}


/* ============================================================
   SUCCESS BUTTON
   ============================================================ */

.btn-success,
.tw-dw-btn-success {
    background: #F2622A !important;
    border-color: #F2622A !important;
    color: #FFFFFF !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.tw-dw-btn-success:hover,
.tw-dw-btn-success:focus,
.tw-dw-btn-success:active {
    background: #E84F1D !important;
    border-color: #E84F1D !important;
    color: #FFFFFF !important;
}


/* ============================================================
   DAISYUI SUCCESS VARIABLE
   ============================================================ */

.tw-dw-btn-success {
    --btn-color: #F2622A !important;
}


/* ============================================================
   NEXT BUTTON
   ============================================================ */

.next,
.next-step,
.btn-next,
button.next,
button[type="submit"] {
    background: #F2622A !important;
    background-color: #F2622A !important;
    border-color: #F2622A !important;
    color: #FFFFFF !important;
}

.next:hover,
.next-step:hover,
.btn-next:hover,
button.next:hover,
button[type="submit"]:hover {
    background: #E84F1D !important;
    background-color: #E84F1D !important;
    border-color: #E84F1D !important;
}


/* ============================================================
   FILE UPLOAD / BROWSE
   ============================================================ */

.btn-file,
.fileinput-browse,
.fileinput-upload,
.fileinput .btn {
    background: #F2622A !important;
    border-color: #F2622A !important;
    color: #FFFFFF !important;
}

.btn-file:hover,
.fileinput-browse:hover,
.fileinput-upload:hover,
.fileinput .btn:hover {
    background: #E84F1D !important;
    border-color: #E84F1D !important;
}


/* ============================================================
   ACTIVE REGISTRATION STEP
   ============================================================ */

.steps li.active,
.steps li.active a,
.steps .active,
.steps .active a,
.wizard .steps li.active,
.wizard .steps li.active a,
.wizard-step.active,
.step.active {
    background: #F2622A !important;
    background-color: #F2622A !important;
    border-color: #F2622A !important;
    color: #FFFFFF !important;
}

.steps li.active *,
.steps .active *,
.wizard .steps li.active * {
    color: #FFFFFF !important;
}


/* ============================================================
   REGISTRATION PAGE
   ============================================================ */

.register-page,
.register-container,
.registration-container,
.business-register {
    background: #FFF1EB !important;
}


/* ============================================================
   FORM LABELS
   ============================================================ */

.form-group label {
    color: #17284E !important;
}


/* ============================================================
   INPUTS
   ============================================================ */

.form-control,
input,
select,
textarea {
    border-color: #E2E8F0;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus,
.tw-dw-input:focus {
    border-color: #F2622A !important;
    box-shadow: 0 0 0 1px #F2622A !important;
}


/* ============================================================
   INPUT ICONS
   ============================================================ */

.input-group-addon i,
.input-group-text i,
.form-group i {
    color: #F2622A !important;
}


/* ============================================================
   LINKS
   ============================================================ */

a {
    color: #17284E;
}

a:hover {
    color: #F2622A !important;
}


/* ============================================================
   PRIMARY BOX BORDER
   ============================================================ */

.box.box-primary {
    border-top-color: #F2622A !important;
}


/* ============================================================
   PROGRESS BAR
   ============================================================ */

.progress-bar {
    background-color: #F2622A !important;
}


/* ============================================================
   BLUE TAILWIND BACKGROUNDS
   ============================================================ */

.tw-bg-blue-500,
.tw-bg-blue-600 {
    background-color: #17284E !important;
}

.tw-bg-blue-700 {
    background-color: #101D3A !important;
}


/* ============================================================
   INDIGO
   ============================================================ */

.tw-bg-indigo-500,
.tw-bg-indigo-600 {
    background-color: #17284E !important;
}

.tw-bg-indigo-700 {
    background-color: #101D3A !important;
}


/* ============================================================
   PURPLE
   ============================================================ */

.tw-bg-purple-500,
.tw-bg-purple-600 {
    background-color: #17284E !important;
}

.tw-bg-purple-700 {
    background-color: #101D3A !important;
}


/* ============================================================
   FOOTER
   ============================================================ */

footer,
.main-footer,
.footer,
.page-footer,
.bottom-footer,
.registration-footer {
    background: #17284E !important;
    background-color: #17284E !important;
    color: #FFFFFF !important;
    border-color: #17284E !important;
}

footer a,
.main-footer a {
    color: #FFFFFF !important;
}

footer a:hover,
.main-footer a:hover {
    color: #F2622A !important;
}


/* ============================================================
   TEXT
   ============================================================ */

.text-primary {
    color: #F2622A !important;
}

.text-navy {
    color: #17284E !important;
}


/* ============================================================
   DROPDOWN HOVER
   ============================================================ */

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: #FFF1EB !important;
    color: #17284E !important;
}


/* ============================================================
   CHECKBOX / RADIO
   ============================================================ */

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #F2622A !important;
}


/* ============================================================
   SELECTION
   ============================================================ */

::selection {
    background: #F2622A !important;
    color: #FFFFFF !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar-thumb {
    background: #17284E !important;
}

::-webkit-scrollbar-thumb:hover {
    background: #F2622A !important;
}
/* ============================================================
   LEKAJHOKA AUTH HEADER
   Sign In / Register / Pricing / Language
   ============================================================ */

.lk-auth-link {
    color: #17284E !important;
    text-decoration: none !important;
}

.lk-auth-link:hover,
.lk-auth-link:focus {
    color: #F2622A !important;
    text-decoration: none !important;
}


/* Language selector */
.auth2-language,
.auth2-language a,
.language-btn,
.language-btn a {
    color: #17284E !important;
}

.auth2-language:hover,
.auth2-language a:hover,
.language-btn:hover,
.language-btn a:hover {
    color: #F2622A !important;
}


/* Registration page header links */
body a.tw-text-white.lk-auth-link {
    color: #17284E !important;
}

body a.tw-text-white.lk-auth-link:hover {
    color: #F2622A !important;
}
/* ==========================================
   BILLING / PAYMENT - ORANGE & NAVY
   Professional UI
========================================== */

/* Payment/Billing cards */
.payment-method,
.billing-section,
.payment-section,
.box.payment-box {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
}

/* Section headings */
.payment-method h3,
.billing-section h3,
.payment-section h3,
.box.payment-box .box-title {
    color: #1E2E5C !important;
    font-weight: 600 !important;
}

/* Labels */
.payment-method label,
.billing-section label,
.payment-section label {
    color: #1E2E5C !important;
    font-weight: 500 !important;
}

/* Inputs */
.payment-method input,
.payment-method select,
.payment-method textarea,
.billing-section input,
.billing-section select,
.billing-section textarea,
.payment-section input,
.payment-section select,
.payment-section textarea {
    border: 1px solid #d9dee8 !important;
    border-radius: 6px !important;
    color: #1E2E5C !important;
    background: #fff !important;
}

/* Input focus */
.payment-method input:focus,
.payment-method select:focus,
.payment-method textarea:focus,
.billing-section input:focus,
.billing-section select:focus,
.billing-section textarea:focus,
.payment-section input:focus,
.payment-section select:focus,
.payment-section textarea:focus {
    border-color: #FF6B1A !important;
    box-shadow: 0 0 0 2px rgba(255,107,26,.12) !important;
}

/* Payment amount / important values */
.payment-amount,
.billing-amount,
.total-amount {
    color: #FF6B1A !important;
    font-weight: 700 !important;
}

/* Primary payment buttons */
.payment-method .btn-primary,
.billing-section .btn-primary,
.payment-section .btn-primary,
.payment-method .btn-success,
.billing-section .btn-success,
.payment-section .btn-success {
    background: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* Button hover */
.payment-method .btn-primary:hover,
.billing-section .btn-primary:hover,
.payment-section .btn-primary:hover,
.payment-method .btn-success:hover,
.billing-section .btn-success:hover,
.payment-section .btn-success:hover {
    background: #E85A0D !important;
    border-color: #E85A0D !important;
    color: #ffffff !important;
}

/* Secondary buttons */
.payment-method .btn-default,
.billing-section .btn-default,
.payment-section .btn-default {
    background: #1E2E5C !important;
    border-color: #1E2E5C !important;
    color: #ffffff !important;
}

/* Tables inside billing/payment */
.billing-section table thead th,
.payment-section table thead th {
    background: #1E2E5C !important;
    color: #ffffff !important;
}

.billing-section table tbody tr:hover,
.payment-section table tbody tr:hover {
    background: #FFF7F2 !important;
}

/* Orange divider */
.billing-section hr,
.payment-section hr {
    border-top: 1px solid #FF6B1A !important;
    opacity: .25;
}

/* Badges */
.billing-section .label-success,
.payment-section .label-success {
    background: #FF6B1A !important;
}

.billing-section .label-info,
.payment-section .label-info {
    background: #1E2E5C !important;
}

/* Dropdown menus */
.billing-section .dropdown-menu a:hover,
.payment-section .dropdown-menu a:hover {
    background: #FFF3EB !important;
    color: #1E2E5C !important;
}

/* Clean white panels */
.billing-section .box,
.payment-section .box {
    border-top: 3px solid #FF6B1A !important;
    box-shadow: 0 2px 8px rgba(30,46,92,.08) !important;
}
/* =========================================================
   LEKAJHOKA BILLING / PAYMENT UI
   Orange + Navy Professional Style
   ========================================================= */

:root {
    --lk-orange: #FF6B1A;
    --lk-orange-hover: #E85A0D;
    --lk-navy: #1E2E5C;
    --lk-light: #FFF7F2;
    --lk-border: #E5E7EB;
}

/* Billing / Payment main boxes */
.payment_row,
.payment-section,
.billing-section {
    background: #FFFFFF !important;
    border: 1px solid var(--lk-border) !important;
    border-radius: 8px !important;
}

/* Section headings */
.payment_row .box-header,
.payment-section .box-header,
.billing-section .box-header {
    background: var(--lk-navy) !important;
    color: #FFFFFF !important;
    border-radius: 7px 7px 0 0 !important;
}

/* Labels */
.payment_row label,
.payment-section label,
.billing-section label {
    color: var(--lk-navy) !important;
    font-weight: 600 !important;
}

/* Inputs */
.payment_row .form-control,
.payment-section .form-control,
.billing-section .form-control {
    border: 1px solid #D9DEE8 !important;
    border-radius: 6px !important;
    background: #FFFFFF !important;
    color: #1E2E5C !important;
}

/* Input focus */
.payment_row .form-control:focus,
.payment-section .form-control:focus,
.billing-section .form-control:focus {
    border-color: var(--lk-orange) !important;
    box-shadow: 0 0 0 2px rgba(255,107,26,.12) !important;
}

/* Total / important amounts */
.payment-amount,
.billing-amount,
.total-amount,
.payment_row .lead {
    color: var(--lk-orange) !important;
    font-weight: 700 !important;
}

/* Primary payment buttons */
.payment_row .btn-primary,
.payment_row .btn-success,
.payment-section .btn-primary,
.payment-section .btn-success,
.billing-section .btn-primary,
.billing-section .btn-success {
    background: var(--lk-orange) !important;
    border-color: var(--lk-orange) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

/* Hover */
.payment_row .btn-primary:hover,
.payment_row .btn-success:hover,
.payment-section .btn-primary:hover,
.payment-section .btn-success:hover,
.billing-section .btn-primary:hover,
.billing-section .btn-success:hover {
    background: var(--lk-orange-hover) !important;
    border-color: var(--lk-orange-hover) !important;
}

/* Secondary buttons */
.payment_row .btn-default,
.payment-section .btn-default,
.billing-section .btn-default {
    background: var(--lk-navy) !important;
    border-color: var(--lk-navy) !important;
    color: #FFFFFF !important;
}

/* Change Return */
.change_return_span {
    color: var(--lk-orange) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Payment method rows */
.payment_row {
    margin-bottom: 10px !important;
    padding: 12px !important;
}

/* Tables */
.payment-section table thead th,
.billing-section table thead th {
    background: var(--lk-navy) !important;
    color: #FFFFFF !important;
}

.payment-section table tbody tr:hover,
.billing-section table tbody tr:hover {
    background: var(--lk-light) !important;
}

/* Dropdown hover */
.payment-section .dropdown-menu > li > a:hover,
.billing-section .dropdown-menu > li > a:hover {
    background: var(--lk-light) !important;
    color: var(--lk-navy) !important;
}

/* Orange highlights */
.payment-section .text-primary,
.billing-section .text-primary {
    color: var(--lk-orange) !important;
}

/* Selection */
::selection {
    background: var(--lk-orange) !important;
    color: #FFFFFF !important;
}
/* =========================================================
   LEKAJHOKA POS PAYMENT SCREEN
   FINAL PAYMENT MODAL DESIGN
   Orange + Navy
========================================================= */

/* MAIN PAYMENT MODAL */
#modal_payment .modal-dialog {
    width: 900px !important;
    max-width: 95% !important;
    margin: 30px auto !important;
}

#modal_payment .modal-content {
    background: #FFFFFF !important;
    border: none !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0,0,0,.18) !important;
}

/* HEADER */
#modal_payment .modal-header {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 18px 22px !important;
}

#modal_payment .modal-title {
    color: #1E2E5C !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

#modal_payment .modal-header .close {
    color: #1E2E5C !important;
    opacity: .7 !important;
    font-size: 24px !important;
}

#modal_payment .modal-header .close:hover {
    color: #FF6B1A !important;
    opacity: 1 !important;
}

/* BODY */
#modal_payment .modal-body {
    background: #FFFFFF !important;
    padding: 20px !important;
}

/* LABELS */
#modal_payment label {
    color: #1E2E5C !important;
    font-weight: 600 !important;
}

/* INPUTS */
#modal_payment .form-control {
    border: 1px solid #D9DEE8 !important;
    border-radius: 5px !important;
    background: #FFFFFF !important;
    color: #1E2E5C !important;
}

#modal_payment .form-control:focus {
    border-color: #FF6B1A !important;
    box-shadow: 0 0 0 2px rgba(255,107,26,.12) !important;
}

/* INPUT GROUP ICON */
#modal_payment .input-group-addon {
    background: #FFFFFF !important;
    border-color: #D9DEE8 !important;
    color: #FF6B1A !important;
}

/* =========================================================
   CASH DENOMINATIONS
========================================================= */

#modal_payment .cash_denomination_div {
    margin-top: 5px !important;
}

#modal_payment .cash_denomination_div > strong {
    display: block !important;
    color: #1E2E5C !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

/* Denomination table */
#modal_payment .cash_denomination_div table {
    width: 100% !important;
    margin-bottom: 10px !important;
    border: 1px solid #D9DEE8 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Table header */
#modal_payment .cash_denomination_div table thead th {
    background: #1E2E5C !important;
    color: #FFFFFF !important;
    border: 1px solid #1E2E5C !important;
    font-weight: 600 !important;
    text-align: center !important;
    padding: 8px 6px !important;
}

/* Table body */
#modal_payment .cash_denomination_div table tbody td {
    background: #FFFFFF !important;
    color: #1E2E5C !important;
    border: 1px solid #E5E7EB !important;
    padding: 5px 8px !important;
    vertical-align: middle !important;
}

/* Denomination number */
#modal_payment .cash_denomination_div table tbody td:first-child {
    font-weight: 600 !important;
}

/* X and = symbols */
#modal_payment .cash_denomination_div table tbody td:nth-child(2),
#modal_payment .cash_denomination_div table tbody td:nth-child(4) {
    color: #FF6B1A !important;
    font-weight: 700 !important;
}

/* Count input */
#modal_payment .cash_denomination_div .cash_denomination {
    height: 32px !important;
    width: 100px !important;
    margin: auto !important;
    text-align: center !important;
    border: 1px solid #D9DEE8 !important;
    border-radius: 4px !important;
}

/* Count input focus */
#modal_payment .cash_denomination_div .cash_denomination:focus {
    border-color: #FF6B1A !important;
    box-shadow: 0 0 0 2px rgba(255,107,26,.12) !important;
}

/* Subtotal */
#modal_payment .denomination_subtotal {
    color: #1E2E5C !important;
    font-weight: 500 !important;
}

/* Total row */
#modal_payment .cash_denomination_div table tfoot {
    background: #F8FAFC !important;
}

#modal_payment .cash_denomination_div table tfoot th,
#modal_payment .cash_denomination_div table tfoot td {
    color: #1E2E5C !important;
    font-weight: 700 !important;
    border-top: 2px solid #D9DEE8 !important;
    padding: 8px !important;
}

#modal_payment .cash_denomination_div .denomination_total {
    color: #FF6B1A !important;
    font-weight: 700 !important;
}

/* =========================================================
   PAYMENT ACCOUNT
========================================================= */

#modal_payment .account-dropdown {
    color: #1E2E5C !important;
}

/* =========================================================
   RIGHT SIDE SUMMARY
========================================================= */

#modal_payment .box.bg-orange {
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.08) !important;
    overflow: hidden !important;
}

#modal_payment .box.bg-orange .box-body {
    background: #FFFFFF !important;
    padding: 16px !important;
}

/* Summary labels */
#modal_payment .box.bg-orange strong {
    color: #1E2E5C !important;
    font-size: 13px !important;
}

/* Summary values */
#modal_payment .total_quantity,
#modal_payment .total_payable_span,
#modal_payment .total_paying,
#modal_payment .change_return_span,
#modal_payment .balance_due {
    color: #FF6B1A !important;
    font-size: 20px !important;
    font-weight: 700 !important;
}

/* Summary divider */
#modal_payment .box.bg-orange hr {
    border-top: 1px solid #D9DEE8 !important;
    margin: 12px 0 !important;
}

/* =========================================================
   ADD PAYMENT ROW
========================================================= */

#modal_payment #add-payment-row {
    width: 100% !important;
    background: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
}

#modal_payment #add-payment-row:hover {
    background: #E85A0D !important;
    border-color: #E85A0D !important;
}

/* =========================================================
   PAYMENT NOTE
========================================================= */

#modal_payment textarea {
    border: 1px solid #D9DEE8 !important;
    border-radius: 5px !important;
    color: #1E2E5C !important;
    resize: vertical !important;
}

/* =========================================================
   FOOTER BUTTONS
========================================================= */

#modal_payment .modal-footer {
    background: #FFFFFF !important;
    border-top: 1px solid #E5E7EB !important;
    padding: 15px 20px !important;
}

/* Cancel */
#modal_payment .modal-footer .tw-dw-btn-neutral {
    background: #1E2E5C !important;
    border-color: #1E2E5C !important;
    color: #FFFFFF !important;
}

/* Save Payment */
#modal_payment #pos-save {
    background: #FF6B1A !important;
    border-color: #FF6B1A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
}

#modal_payment #pos-save:hover {
    background: #E85A0D !important;
    border-color: #E85A0D !important;
}

/* =========================================================
   ERROR
========================================================= */

#modal_payment .cash_denomination_error {
    color: #DC2626 !important;
    font-weight: 600 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    #modal_payment .modal-dialog {
        width: 96% !important;
        max-width: 96% !important;
        margin: 10px auto !important;
    }

    #modal_payment .col-md-9,
    #modal_payment .col-md-3 {
        width: 100% !important;
    }

    #modal_payment .modal-body {
        padding: 12px !important;
    }

}