html > body {
background-color: #F8FAFC!important;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
background-color: #e1e3e5!important;
}
.navbar.lw-sidebar-container {
background-color: #FFFFFF!important;
}
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
color: #1E293B!important;
}
div:where(.swal2-container) div:where(.swal2-popup),
.navbar.lw-sidebar-container ,.navbar-collapse, .card, .card-header, fieldset:not(.filepond--file-wrapper) {
    background-color: #FFFFFF!important;
    border-color: #e5e5e5!important;
    }
.card-body fieldset:not(.filepond--file-wrapper) legend {
    background-color: #f2f2f2!important;
    border-color: #e5e5e5!important;
    color: #1E293B!important;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
background-color: #0b2548!important;
}
.card.lw-whatsapp-chat-block-container .nav-tabs, .nav-tabs .nav-link.active {
border-color: #123A70 !important;
}
.lw-page-title,a {
color: #123A70;
}
.lw-page-title:hover,a:hover {
color: #0e2e59;
}
.card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
background-color: #123A70;
border-color: #103464;
}
.mdtoast.mdt--primary
,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,.nav-tabs .nav-link.active, .dropdown-item:before, .dropdown-item:hover,.dropdown-menu .active a.dropdown-item,
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active,
.conversation-compose .send .circle, .page-item.active .page-link,.btn.btn-light.lw-save-language,
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before
,#navbar-main
{
background-color: #123A70!important;
border-color: #103464!important;
color: #ffffff!important;
}

{
background-color: #123A70;
border-color: #103464;
color: #ffffff;
}
.mdtoast.mdt--secondary
{
background-color: #64748B!important;
border-color: #5a687d!important;
color: #ffffff!important;
}

{
background-color: #64748B;
border-color: #5a687d;
color: #ffffff;
}
.mdtoast.mdt--success
{
background-color: #2dce89!important;
border-color: #28b97b!important;
color: #ffffff!important;
}

{
background-color: #2dce89;
border-color: #28b97b;
color: #ffffff;
}
.mdtoast.mdt--danger
{
background-color: #f5365c!important;
border-color: #dc3052!important;
color: #ffffff!important;
}

{
background-color: #f5365c;
border-color: #dc3052;
color: #ffffff;
}
.mdtoast.mdt--warning
{
background-color: #fb6340!important;
border-color: #e15939!important;
color: #ffffff!important;
}

{
background-color: #fb6340;
border-color: #e15939;
color: #ffffff;
}
.mdtoast.mdt--info
{
background-color: #17a2b8!important;
border-color: #1491a5!important;
color: #ffffff!important;
}

{
background-color: #17a2b8;
border-color: #1491a5;
color: #ffffff;
}
.mdtoast.mdt--light
{
background-color: #adb5bd!important;
border-color: #9ba2aa!important;
color: #ffffff!important;
}

{
background-color: #adb5bd;
border-color: #9ba2aa;
color: #ffffff;
}
.mdtoast.mdt--dark
{
background-color: #212528!important;
border-color: #1d2124!important;
color: #ffffff!important;
}

{
background-color: #212528;
border-color: #1d2124;
color: #ffffff;
}
.mdtoast.mdt--muted
{
background-color: #8898aa!important;
border-color: #7a8899!important;
color: #ffffff!important;
}

{
background-color: #8898aa;
border-color: #7a8899;
color: #ffffff;
}
.bg-primary { background-color: #123A70 !important; }
.text-primary { color: #123A70 !important; }
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle,.btn.btn-primary { background-color: #123A70 !important; border-color: #0d2b54 !important; color:
#fff !important; }
.btn.btn-primary:hover { background-color: #103464 !important;
border-color: #103464 !important; }
.btn.btn-outline-primary { color: #123A70 !important; border-color: #123A70 !important; }
.btn.btn-outline-primary:hover { background-color: #123A70 !important; color: #fff !important; }
.alert.alert-primary { background-color: #123A70 !important; border-color: #11376a !important; color: #fff !important; }
.badge.badge-primary { background-color: #123A70 !important; color: #fff !important; }
.card.card-primary { background-color: #123A70 !important; border-color: #11376a !important; color: #fff !important; }
.list-group-item.list-group-item-primary { background-color: #123A70 !important; border-color: #11376a !important; color: #fff !important; }
.table.table-primary { background-color: #123A70 !important; color: #fff !important; }
.border.border-primary { border-color: #123A70 !important; }
.bg-secondary { background-color: #64748B !important; }
.text-secondary { color: #64748B !important; }
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle,.btn.btn-secondary { background-color: #64748B !important; border-color: #4b5768 !important; color:
#fff !important; }
.btn.btn-secondary:hover { background-color: #5a687d !important;
border-color: #5a687d !important; }
.btn.btn-outline-secondary { color: #64748B !important; border-color: #64748B !important; }
.btn.btn-outline-secondary:hover { background-color: #64748B !important; color: #fff !important; }
.alert.alert-secondary { background-color: #64748B !important; border-color: #5f6e84 !important; color: #fff !important; }
.badge.badge-secondary { background-color: #64748B !important; color: #fff !important; }
.card.card-secondary { background-color: #64748B !important; border-color: #5f6e84 !important; color: #fff !important; }
.list-group-item.list-group-item-secondary { background-color: #64748B !important; border-color: #5f6e84 !important; color: #fff !important; }
.table.table-secondary { background-color: #64748B !important; color: #fff !important; }
.border.border-secondary { border-color: #64748B !important; }
.bg-success { background-color: #2dce89 !important; }
.text-success { color: #2dce89 !important; }
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle,.btn.btn-success { background-color: #2dce89 !important; border-color: #219a66 !important; color:
#fff !important; }
.btn.btn-success:hover { background-color: #28b97b !important;
border-color: #28b97b !important; }
.btn.btn-outline-success { color: #2dce89 !important; border-color: #2dce89 !important; }
.btn.btn-outline-success:hover { background-color: #2dce89 !important; color: #fff !important; }
.alert.alert-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.badge.badge-success { background-color: #2dce89 !important; color: #fff !important; }
.card.card-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.list-group-item.list-group-item-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.table.table-success { background-color: #2dce89 !important; color: #fff !important; }
.border.border-success { border-color: #2dce89 !important; }
.bg-danger { background-color: #f5365c !important; }
.text-danger { color: #f5365c !important; }
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle,.btn.btn-danger { background-color: #f5365c !important; border-color: #b72845 !important; color:
#fff !important; }
.btn.btn-danger:hover { background-color: #dc3052 !important;
border-color: #dc3052 !important; }
.btn.btn-outline-danger { color: #f5365c !important; border-color: #f5365c !important; }
.btn.btn-outline-danger:hover { background-color: #f5365c !important; color: #fff !important; }
.alert.alert-danger { background-color: #f5365c !important; border-color: #e83357 !important; color: #fff !important; }
.badge.badge-danger { background-color: #f5365c !important; color: #fff !important; }
.card.card-danger { background-color: #f5365c !important; border-color: #e83357 !important; color: #fff !important; }
.list-group-item.list-group-item-danger { background-color: #f5365c !important; border-color: #e83357 !important; color: #fff !important; }
.table.table-danger { background-color: #f5365c !important; color: #fff !important; }
.border.border-danger { border-color: #f5365c !important; }
.bg-warning { background-color: #fb6340 !important; }
.text-warning { color: #fb6340 !important; }
.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle,.btn.btn-warning { background-color: #fb6340 !important; border-color: #bc4a30 !important; color:
#fff !important; }
.btn.btn-warning:hover { background-color: #e15939 !important;
border-color: #e15939 !important; }
.btn.btn-outline-warning { color: #fb6340 !important; border-color: #fb6340 !important; }
.btn.btn-outline-warning:hover { background-color: #fb6340 !important; color: #fff !important; }
.alert.alert-warning { background-color: #fb6340 !important; border-color: #ee5e3c !important; color: #fff !important; }
.badge.badge-warning { background-color: #fb6340 !important; color: #fff !important; }
.card.card-warning { background-color: #fb6340 !important; border-color: #ee5e3c !important; color: #fff !important; }
.list-group-item.list-group-item-warning { background-color: #fb6340 !important; border-color: #ee5e3c !important; color: #fff !important; }
.table.table-warning { background-color: #fb6340 !important; color: #fff !important; }
.border.border-warning { border-color: #fb6340 !important; }
.bg-info { background-color: #17a2b8 !important; }
.text-info { color: #17a2b8 !important; }
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle,.btn.btn-info { background-color: #17a2b8 !important; border-color: #11798a !important; color:
#fff !important; }
.btn.btn-info:hover { background-color: #1491a5 !important;
border-color: #1491a5 !important; }
.btn.btn-outline-info { color: #17a2b8 !important; border-color: #17a2b8 !important; }
.btn.btn-outline-info:hover { background-color: #17a2b8 !important; color: #fff !important; }
.alert.alert-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.badge.badge-info { background-color: #17a2b8 !important; color: #fff !important; }
.card.card-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.list-group-item.list-group-item-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.table.table-info { background-color: #17a2b8 !important; color: #fff !important; }
.border.border-info { border-color: #17a2b8 !important; }
.bg-light { background-color: #adb5bd !important; }
.text-light { color: #adb5bd !important; }
.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle,.btn.btn-light { background-color: #adb5bd !important; border-color: #81878d !important; color:
#fff !important; }
.btn.btn-light:hover { background-color: #9ba2aa !important;
border-color: #9ba2aa !important; }
.btn.btn-outline-light { color: #adb5bd !important; border-color: #adb5bd !important; }
.btn.btn-outline-light:hover { background-color: #adb5bd !important; color: #fff !important; }
.alert.alert-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.badge.badge-light { background-color: #adb5bd !important; color: #fff !important; }
.card.card-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.list-group-item.list-group-item-light { background-color: #adb5bd !important; border-color: #a4abb3 !important; color: #fff !important; }
.table.table-light { background-color: #adb5bd !important; color: #fff !important; }
.border.border-light { border-color: #adb5bd !important; }
.bg-dark { background-color: #212528 !important; }
.text-dark { color: #212528 !important; }
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle,.btn.btn-dark { background-color: #212528 !important; border-color: #181b1e !important; color:
#fff !important; }
.btn.btn-dark:hover { background-color: #1d2124 !important;
border-color: #1d2124 !important; }
.btn.btn-outline-dark { color: #212528 !important; border-color: #212528 !important; }
.btn.btn-outline-dark:hover { background-color: #212528 !important; color: #fff !important; }
.alert.alert-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.badge.badge-dark { background-color: #212528 !important; color: #fff !important; }
.card.card-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.list-group-item.list-group-item-dark { background-color: #212528 !important; border-color: #1f2326 !important; color: #fff !important; }
.table.table-dark { background-color: #212528 !important; color: #fff !important; }
.border.border-dark { border-color: #212528 !important; }
.bg-muted { background-color: #8898aa !important; }
.text-muted { color: #8898aa !important; }
.btn-outline-muted:not(:disabled):not(.disabled).active, .btn-outline-muted:not(:disabled):not(.disabled):active, .show>.btn-outline-muted.dropdown-toggle,.btn.btn-muted { background-color: #8898aa !important; border-color: #66727f !important; color:
#fff !important; }
.btn.btn-muted:hover { background-color: #7a8899 !important;
border-color: #7a8899 !important; }
.btn.btn-outline-muted { color: #8898aa !important; border-color: #8898aa !important; }
.btn.btn-outline-muted:hover { background-color: #8898aa !important; color: #fff !important; }
.alert.alert-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.badge.badge-muted { background-color: #8898aa !important; color: #fff !important; }
.card.card-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.list-group-item.list-group-item-muted { background-color: #8898aa !important; border-color: #8190a1 !important; color: #fff !important; }
.table.table-muted { background-color: #8898aa !important; color: #fff !important; }
.border.border-muted { border-color: #8898aa !important; }

html > body {
    background: #F8FAFC!important;
}



       
        @media (prefers-color-scheme: dark) {
    html > body {
        background-color: #1E1E25!important;
        }
        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation {
        background-color: #1b1b21!important;
        }
        div:where(.swal2-container) div:where(.swal2-popup),
        .navbar.lw-sidebar-container ,.navbar-collapse, .card, .card-header, fieldset:not(.filepond--file-wrapper) {
        background-color: #15151a!important;
        border-color: #2a2a34!important;
        }
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link[data-toggle=collapse]:after,
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
        .navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link .fa {
        color: #FFFFFF!important;
        }
        .card-body fieldset:not(.filepond--file-wrapper) legend {
            background-color: #1f1f27!important;
            border-color: #2a2a34!important;
            color: #FFFFFF!important;
        }
                                        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .user-bar {
        background-color: #0f463d!important;
        }
        .card.lw-whatsapp-chat-block-container .nav-tabs {
        border-color: #1e8d7a !important;
        }
        .lw-page-title,a {
        color: #1e8d7a;
        }
        .lw-page-title:hover,a:hover {
        color: #187061;
        }
        .card.lw-whatsapp-chat-block-container .lw-whatsapp-chat-window .conversation-compose .send .circle {
        background-color: #1e8d7a;
        border-color: #1b7e6d;
        }
                .mdtoast.mdt--primary
                ,.lw-minimized-menu .navbar-vertical.navbar-expand-md .navbar-nav .nav-link.active:before,.nav-tabs .nav-link.active, .dropdown-item:before, .dropdown-item:hover,.dropdown-menu .active a.dropdown-item,
        div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm, .dropdown-item.active, .dropdown-item:active,
        .conversation-compose .send .circle, .page-item.active .page-link,.btn.btn-light.lw-save-language,
        .dataTables_wrapper .table.dataTable thead,
        table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child:before
        ,#navbar-main
                {
        background-color: #1e8d7a!important;
        border-color: #1b7e6d!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--secondary
                {
        background-color: #57616b!important;
        border-color: #4e5760!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--success
                {
        background-color: #2dce89!important;
        border-color: #28b97b!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--danger
                {
        background-color: #c11616!important;
        border-color: #ad1313!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--warning
                {
        background-color: #d99952!important;
        border-color: #c38949!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--info
                {
        background-color: #17a2b8!important;
        border-color: #1491a5!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--light
                {
        background-color: #696868!important;
        border-color: #5e5d5d!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--dark
                {
        background-color: #9a9daf!important;
        border-color: #8a8d9d!important;
        color: #ffffff !important;
        }
                                        .mdtoast.mdt--muted
                {
        background-color: #c3c3c3!important;
        border-color: #afafaf!important;
        color: #ffffff !important;
        }
                        .bg-primary { background-color: #1e8d7a !important; }
.text-primary { color: #1e8d7a !important; }
.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle,.btn.btn-primary { background-color: #1e8d7a !important; border-color: #1e8d7a !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-primary:hover { background-color: #1b7e6d !important;
        border-color: #1b7e6d !important; }
.btn.btn-outline-primary { color: #1e8d7a !important; border-color: #1e8d7a !important; }
.btn.btn-outline-primary:hover { background-color: #1e8d7a !important; color: #fff !important; }
.alert.alert-primary { background-color: #1e8d7a !important; border-color: #1c8573 !important; color: #fff !important; }
.badge.badge-primary { background-color: #1e8d7a !important; color: #fff !important; }
.card.card-primary { background-color: #1e8d7a !important; border-color: #1c8573 !important; color: #fff !important; }
.list-group-item.list-group-item-primary { background-color: #1e8d7a !important; border-color: #1c8573 !important; color: #fff !important; }
.table.table-primary { background-color: #1e8d7a !important; color: #fff !important; }
.border.border-primary { border-color: #1e8d7a !important; }
.bg-secondary { background-color: #57616b !important; }
.text-secondary { color: #57616b !important; }
.btn-outline-secondary:not(:disabled):not(.disabled).active, .btn-outline-secondary:not(:disabled):not(.disabled):active, .show>.btn-outline-secondary.dropdown-toggle,.btn.btn-secondary { background-color: #57616b !important; border-color: #57616b !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-secondary:hover { background-color: #4e5760 !important;
        border-color: #4e5760 !important; }
.btn.btn-outline-secondary { color: #57616b !important; border-color: #57616b !important; }
.btn.btn-outline-secondary:hover { background-color: #57616b !important; color: #fff !important; }
.alert.alert-secondary { background-color: #57616b !important; border-color: #525c65 !important; color: #fff !important; }
.badge.badge-secondary { background-color: #57616b !important; color: #fff !important; }
.card.card-secondary { background-color: #57616b !important; border-color: #525c65 !important; color: #fff !important; }
.list-group-item.list-group-item-secondary { background-color: #57616b !important; border-color: #525c65 !important; color: #fff !important; }
.table.table-secondary { background-color: #57616b !important; color: #fff !important; }
.border.border-secondary { border-color: #57616b !important; }
.bg-success { background-color: #2dce89 !important; }
.text-success { color: #2dce89 !important; }
.btn-outline-success:not(:disabled):not(.disabled).active, .btn-outline-success:not(:disabled):not(.disabled):active, .show>.btn-outline-success.dropdown-toggle,.btn.btn-success { background-color: #2dce89 !important; border-color: #2dce89 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-success:hover { background-color: #28b97b !important;
        border-color: #28b97b !important; }
.btn.btn-outline-success { color: #2dce89 !important; border-color: #2dce89 !important; }
.btn.btn-outline-success:hover { background-color: #2dce89 !important; color: #fff !important; }
.alert.alert-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.badge.badge-success { background-color: #2dce89 !important; color: #fff !important; }
.card.card-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.list-group-item.list-group-item-success { background-color: #2dce89 !important; border-color: #2ac382 !important; color: #fff !important; }
.table.table-success { background-color: #2dce89 !important; color: #fff !important; }
.border.border-success { border-color: #2dce89 !important; }
.bg-danger { background-color: #c11616 !important; }
.text-danger { color: #c11616 !important; }
.btn-outline-danger:not(:disabled):not(.disabled).active, .btn-outline-danger:not(:disabled):not(.disabled):active, .show>.btn-outline-danger.dropdown-toggle,.btn.btn-danger { background-color: #c11616 !important; border-color: #c11616 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-danger:hover { background-color: #ad1313 !important;
        border-color: #ad1313 !important; }
.btn.btn-outline-danger { color: #c11616 !important; border-color: #c11616 !important; }
.btn.btn-outline-danger:hover { background-color: #c11616 !important; color: #fff !important; }
.alert.alert-danger { background-color: #c11616 !important; border-color: #b71414 !important; color: #fff !important; }
.badge.badge-danger { background-color: #c11616 !important; color: #fff !important; }
.card.card-danger { background-color: #c11616 !important; border-color: #b71414 !important; color: #fff !important; }
.list-group-item.list-group-item-danger { background-color: #c11616 !important; border-color: #b71414 !important; color: #fff !important; }
.table.table-danger { background-color: #c11616 !important; color: #fff !important; }
.border.border-danger { border-color: #c11616 !important; }
.bg-warning { background-color: #d99952 !important; }
.text-warning { color: #d99952 !important; }
.btn-outline-warning:not(:disabled):not(.disabled).active, .btn-outline-warning:not(:disabled):not(.disabled):active, .show>.btn-outline-warning.dropdown-toggle,.btn.btn-warning { background-color: #d99952 !important; border-color: #d99952 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-warning:hover { background-color: #c38949 !important;
        border-color: #c38949 !important; }
.btn.btn-outline-warning { color: #d99952 !important; border-color: #d99952 !important; }
.btn.btn-outline-warning:hover { background-color: #d99952 !important; color: #fff !important; }
.alert.alert-warning { background-color: #d99952 !important; border-color: #ce914d !important; color: #fff !important; }
.badge.badge-warning { background-color: #d99952 !important; color: #fff !important; }
.card.card-warning { background-color: #d99952 !important; border-color: #ce914d !important; color: #fff !important; }
.list-group-item.list-group-item-warning { background-color: #d99952 !important; border-color: #ce914d !important; color: #fff !important; }
.table.table-warning { background-color: #d99952 !important; color: #fff !important; }
.border.border-warning { border-color: #d99952 !important; }
.bg-info { background-color: #17a2b8 !important; }
.text-info { color: #17a2b8 !important; }
.btn-outline-info:not(:disabled):not(.disabled).active, .btn-outline-info:not(:disabled):not(.disabled):active, .show>.btn-outline-info.dropdown-toggle,.btn.btn-info { background-color: #17a2b8 !important; border-color: #17a2b8 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-info:hover { background-color: #1491a5 !important;
        border-color: #1491a5 !important; }
.btn.btn-outline-info { color: #17a2b8 !important; border-color: #17a2b8 !important; }
.btn.btn-outline-info:hover { background-color: #17a2b8 !important; color: #fff !important; }
.alert.alert-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.badge.badge-info { background-color: #17a2b8 !important; color: #fff !important; }
.card.card-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.list-group-item.list-group-item-info { background-color: #17a2b8 !important; border-color: #1599ae !important; color: #fff !important; }
.table.table-info { background-color: #17a2b8 !important; color: #fff !important; }
.border.border-info { border-color: #17a2b8 !important; }
.bg-light { background-color: #696868 !important; }
.text-light { color: #696868 !important; }
.btn-outline-light:not(:disabled):not(.disabled).active, .btn-outline-light:not(:disabled):not(.disabled):active, .show>.btn-outline-light.dropdown-toggle,.btn.btn-light { background-color: #696868 !important; border-color: #696868 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-light:hover { background-color: #5e5d5d !important;
        border-color: #5e5d5d !important; }
.btn.btn-outline-light { color: #696868 !important; border-color: #696868 !important; }
.btn.btn-outline-light:hover { background-color: #696868 !important; color: #fff !important; }
.alert.alert-light { background-color: #696868 !important; border-color: #636262 !important; color: #fff !important; }
.badge.badge-light { background-color: #696868 !important; color: #fff !important; }
.card.card-light { background-color: #696868 !important; border-color: #636262 !important; color: #fff !important; }
.list-group-item.list-group-item-light { background-color: #696868 !important; border-color: #636262 !important; color: #fff !important; }
.table.table-light { background-color: #696868 !important; color: #fff !important; }
.border.border-light { border-color: #696868 !important; }
.bg-dark { background-color: #9a9daf !important; }
.text-dark { color: #9a9daf !important; }
.btn-outline-dark:not(:disabled):not(.disabled).active, .btn-outline-dark:not(:disabled):not(.disabled):active, .show>.btn-outline-dark.dropdown-toggle,.btn.btn-dark { background-color: #9a9daf !important; border-color: #9a9daf !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-dark:hover { background-color: #8a8d9d !important;
        border-color: #8a8d9d !important; }
.btn.btn-outline-dark { color: #9a9daf !important; border-color: #9a9daf !important; }
.btn.btn-outline-dark:hover { background-color: #9a9daf !important; color: #fff !important; }
.alert.alert-dark { background-color: #9a9daf !important; border-color: #9295a6 !important; color: #fff !important; }
.badge.badge-dark { background-color: #9a9daf !important; color: #fff !important; }
.card.card-dark { background-color: #9a9daf !important; border-color: #9295a6 !important; color: #fff !important; }
.list-group-item.list-group-item-dark { background-color: #9a9daf !important; border-color: #9295a6 !important; color: #fff !important; }
.table.table-dark { background-color: #9a9daf !important; color: #fff !important; }
.border.border-dark { border-color: #9a9daf !important; }
.bg-muted { background-color: #c3c3c3 !important; }
.text-muted { color: #c3c3c3 !important; }
.btn-outline-muted:not(:disabled):not(.disabled).active, .btn-outline-muted:not(:disabled):not(.disabled):active, .show>.btn-outline-muted.dropdown-toggle,.btn.btn-muted { background-color: #c3c3c3 !important; border-color: #c3c3c3 !important; color:
        #fff !important; }
.btn.btn-dark, .alert.alert-dark{ 
           
            color :#ffffff !important;
           
        }
.btn.btn-muted:hover { background-color: #afafaf !important;
        border-color: #afafaf !important; }
.btn.btn-outline-muted { color: #c3c3c3 !important; border-color: #c3c3c3 !important; }
.btn.btn-outline-muted:hover { background-color: #c3c3c3 !important; color: #fff !important; }
.alert.alert-muted { background-color: #c3c3c3 !important; border-color: #b9b9b9 !important; color: #fff !important; }
.badge.badge-muted { background-color: #c3c3c3 !important; color: #fff !important; }
.card.card-muted { background-color: #c3c3c3 !important; border-color: #b9b9b9 !important; color: #fff !important; }
.list-group-item.list-group-item-muted { background-color: #c3c3c3 !important; border-color: #b9b9b9 !important; color: #fff !important; }
.table.table-muted { background-color: #c3c3c3 !important; color: #fff !important; }
.border.border-muted { border-color: #c3c3c3 !important; }

                html > body {
            background: #1E1E25!important;
        }
            }





<style>

/* ---------- BASE ---------- */

html > body {
    background: #F8FAFC !important;
    color: #1E293B !important;
}

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

p,
.text-muted {
    color: #64748B;
}


/* ---------- SIDEBAR ---------- */

.navbar.lw-sidebar-container,
.navbar.lw-sidebar-container .navbar-collapse {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link {
    color: #334155 !important;
}

.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link > i {
    color: #64748B !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover {
    color: #123A70 !important;
    background: #F8FAFC !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover > i {
    color: #123A70 !important;
}

/* Active navigation */
.navbar.lw-sidebar-container .navbar-nav .nav-link.active,
.navbar.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link {
    color: #123A70 !important;
    background: #EAF1F8 !important;
    font-weight: 600 !important;
    border-left: 3px solid #D4AF37 !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link.active > i,
.navbar.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link > i {
    color: #123A70 !important;
}


/* ---------- CARDS ---------- */

.card,
.card-header,
.card-body,
fieldset:not(.filepond--file-wrapper) {
    border-color: #E2E8F0 !important;
}

.card {
    background: #FFFFFF !important;
}

.card-header {
    background: #FFFFFF !important;
    color: #1E293B !important;
}

.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    color: #1E293B !important;
}


/* ---------- PAGE TITLES ---------- */

.lw-page-title,
h1.lw-page-title,
h2.lw-page-title,
h3.lw-page-title {
    color: #1E293B !important;
}


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

.main-content a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: #123A70;
}

.main-content a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    color: #0B2854;
}


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

.btn-primary,
.btn.btn-primary {
    background: #123A70 !important;
    border-color: #123A70 !important;
    color: #FFFFFF !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover {
    background: #0B2854 !important;
    border-color: #0B2854 !important;
}

.btn-outline-primary {
    color: #123A70 !important;
    border-color: #123A70 !important;
}

.btn-outline-primary:hover {
    background: #123A70 !important;
    border-color: #123A70 !important;
    color: #FFFFFF !important;
}


/* ---------- TABLES ---------- */

.table,
table.dataTable {
    color: #334155 !important;
}

.table thead th,
table.dataTable thead th {
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

.table td,
table.dataTable td {
    border-color: #E2E8F0 !important;
}

.table-hover tbody tr:hover {
    background: #F8FAFC !important;
}


/* ---------- FORMS ---------- */

.form-control,
.custom-select {
    background: #FFFFFF !important;
    color: #1E293B !important;
    border-color: #CBD5E1 !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: #123A70 !important;
    box-shadow: 0 0 0 .15rem rgba(18,58,112,.12) !important;
}


/* ---------- DROPDOWNS ---------- */

.dropdown-menu {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
}

.dropdown-item {
    color: #334155 !important;
}

.dropdown-item:hover {
    background: #EAF1F8 !important;
    color: #123A70 !important;
}


/* ---------- PAGINATION ---------- */

.page-link {
    color: #123A70 !important;
}

.page-item.active .page-link {
    background: #123A70 !important;
    border-color: #123A70 !important;
    color: #FFFFFF !important;
}


/* ---------- TABS ---------- */

.nav-tabs .nav-link {
    color: #64748B !important;
}

.nav-tabs .nav-link.active {
    background: #123A70 !important;
    border-color: #123A70 !important;
    color: #FFFFFF !important;
}


/* ---------- GOLD ACCENT ---------- */

.zamzam-gold-accent {
    color: #D4AF37 !important;
}


/*
Keep Bootstrap semantic colors intact:
success = success
danger  = error
warning = warning
WhatsApp-specific green remains meaningful.
*/

</style>






<style>

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

html > body,
.main-content {
    background: #FFF4EC !important;
    color: #181818 !important;
}

.main-content {
    min-height: 100vh;
}


/* ==========================================================
   TOP NAVBAR
   ========================================================== */

.navbar-top {
    background: #FF5A0A !important;
    border-bottom: 0 !important;
    box-shadow: 0 4px 18px rgba(255,90,10,.16) !important;
}

.navbar-top a,
.navbar-top .nav-link,
.navbar-top .media-body,
.navbar-top .fa,
.navbar-top .fas {
    color: #FFFFFF !important;
}


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

.navbar.lw-sidebar-container,
.navbar.lw-sidebar-container .navbar-collapse {
    background: #FAFAF8 !important;
    border-color: #E8E4DF !important;
}

.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link {
    color: #424242 !important;
    border-radius: 10px !important;
    margin: 2px 8px !important;
}

.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link > i {
    color: #707070 !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover {
    color: #FF5A0A !important;
    background: #FFF0E7 !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover > i {
    color: #FF5A0A !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link.active,
.navbar.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link {
    color: #FF5A0A !important;
    background: #FFF0E7 !important;
    border-left: 0 !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 #FF5A0A !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link.active > i,
.navbar.lw-sidebar-container .navbar-nav .nav-item.active > .nav-link > i {
    color: #FF5A0A !important;
}


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

.card {
    background: #FFFFFF !important;
    border: 1px solid #E8E4DF !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 14px rgba(40,30,20,.045) !important;
    overflow: hidden;
}

.card-header {
    background: #FFFFFF !important;
    border-color: #EEEAE6 !important;
    color: #181818 !important;
}

.card-body {
    border-color: #EEEAE6 !important;
}

.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.lw-page-title,
h1.lw-page-title,
h2.lw-page-title,
h3.lw-page-title {
    color: #181818 !important;
}


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

.btn-primary,
.btn.btn-primary {
    background: #FF5A0A !important;
    border-color: #FF5A0A !important;
    color: #FFFFFF !important;
    border-radius: 9px !important;
    box-shadow: 0 3px 8px rgba(255,90,10,.18) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover {
    background: #E94E00 !important;
    border-color: #E94E00 !important;
}

.btn-outline-primary {
    color: #FF5A0A !important;
    border-color: #FF5A0A !important;
    border-radius: 9px !important;
}

.btn-outline-primary:hover {
    background: #FF5A0A !important;
    border-color: #FF5A0A !important;
    color: #FFFFFF !important;
}


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

.main-content a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: #E94E00;
}


/* ==========================================================
   TABLES
   ========================================================== */

.table,
table.dataTable {
    color: #333333 !important;
    background: #FFFFFF !important;
}

.table thead th,
table.dataTable thead th {
    color: #66615D !important;
    border-color: #EEEAE6 !important;
    background: #FAF8F6 !important;
}

.table td,
table.dataTable td {
    border-color: #EEEAE6 !important;
}

.table-hover tbody tr:hover {
    background: #FFF7F1 !important;
}


/* ==========================================================
   FORMS
   ========================================================== */

.form-control,
.custom-select {
    background: #FFFFFF !important;
    color: #242424 !important;
    border: 1px solid #DDD8D3 !important;
    border-radius: 9px !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: #FF5A0A !important;
    box-shadow: 0 0 0 .15rem rgba(255,90,10,.12) !important;
}


/* ==========================================================
   DROPDOWNS
   ========================================================== */

.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #EEEAE6 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(30,20,10,.10) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: #FFF0E7 !important;
    color: #E94E00 !important;
}


/* ==========================================================
   PAGINATION
   ========================================================== */

.page-item.active .page-link {
    background: #FF5A0A !important;
    border-color: #FF5A0A !important;
    color: #FFFFFF !important;
}

.page-link {
    color: #E94E00 !important;
}


/* ==========================================================
   TABS
   ========================================================== */

.nav-tabs .nav-link.active {
    color: #FF5A0A !important;
    border-color: transparent transparent #FF5A0A !important;
}


/* ==========================================================
   MODALS
   ========================================================== */

.modal-content {
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 55px rgba(40,25,15,.16) !important;
}

.modal-header {
    border-bottom-color: #EEEAE6 !important;
}


/* ==========================================================
   GENERAL ROUNDING
   ========================================================== */

.alert {
    border-radius: 12px !important;
}

.badge {
    border-radius: 8px !important;
}

</style>





<style id="zamzam-final-theme">

:root {
    --zamzam-bg-deep: #001614;
    --zamzam-bg: #001F1D;
    --zamzam-surface: #032B28;
    --zamzam-surface-2: #063733;
    --zamzam-surface-3: #08433E;

    --zamzam-primary: #00A878;
    --zamzam-primary-bright: #00C896;
    --zamzam-primary-dark: #007F68;

    --zamzam-text: #F4FFFC;
    --zamzam-muted: #9BB8B3;

    --zamzam-border: rgba(0,200,150,.22);
    --zamzam-border-strong: rgba(0,200,150,.42);

    --zamzam-success: #19C37D;
    --zamzam-warning: #F5B942;
    --zamzam-danger: #FF5364;
    --zamzam-info: #35B9FF;
}


/* ============================================================
   APPLICATION BACKGROUND
   ============================================================ */

html,
body {
    background: var(--zamzam-bg-deep) !important;
    color: var(--zamzam-text) !important;
}

body {
    background-image: none !important;
}

.main-content,
.main-content .container-fluid {
    background: var(--zamzam-bg) !important;
}


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

.navbar.lw-sidebar-container,
.navbar.lw-sidebar-container.bg-white,
.navbar.lw-sidebar-container.navbar-light,
.navbar.lw-sidebar-container .navbar-collapse {
    background: var(--zamzam-bg-deep) !important;
    border-color: var(--zamzam-border) !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light .navbar-nav .nav-link,
.navbar.lw-sidebar-container.navbar-light
.navbar-nav
.nav-link[data-toggle="collapse"]:after {
    color: var(--zamzam-muted) !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link i,
.navbar.lw-sidebar-container .navbar-nav .nav-link > i,
.navbar.lw-sidebar-container .navbar-nav .nav-link i[style] {
    color: var(--zamzam-muted) !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover,
.navbar.lw-sidebar-container .navbar-nav .nav-link:focus {
    color: var(--zamzam-primary-bright) !important;
    background: var(--zamzam-surface-2) !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav-link:hover i,
.navbar.lw-sidebar-container .navbar-nav .nav-link:focus i {
    color: var(--zamzam-primary-bright) !important;
}

.navbar.lw-sidebar-container
.navbar-nav
.nav-item.active
> .nav-link,
.navbar.lw-sidebar-container
.navbar-nav
.nav-link.active {
    color: var(--zamzam-text) !important;
    background: linear-gradient(
        90deg,
        rgba(0,200,150,.16),
        rgba(0,200,150,.04)
    ) !important;
    border-left: 3px solid var(--zamzam-primary-bright) !important;
    font-weight: 600 !important;
}

.navbar.lw-sidebar-container
.navbar-nav
.nav-item.active
> .nav-link i,
.navbar.lw-sidebar-container
.navbar-nav
.nav-link.active i {
    color: var(--zamzam-primary-bright) !important;
}


/* Sidebar submenu */

.navbar.lw-sidebar-container .navbar-nav .nav .nav-link {
    color: var(--zamzam-muted) !important;
    background: transparent !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav .nav-link:hover {
    color: var(--zamzam-primary-bright) !important;
    background: rgba(0,200,150,.07) !important;
}

.navbar.lw-sidebar-container .navbar-nav .nav .nav-link i {
    color: var(--zamzam-muted) !important;
}


/* Sidebar divider */

.navbar.lw-sidebar-container hr,
.navbar.lw-sidebar-container .dropdown-divider {
    border-color: var(--zamzam-border) !important;
}


/* ============================================================
   TOP NAVBAR
   ============================================================ */

#navbar-main,
.navbar-main,
.navbar-top {
    background: var(--zamzam-surface) !important;
    border-color: var(--zamzam-border) !important;
}

#navbar-main .nav-link,
.navbar-main .nav-link,
.navbar-top .nav-link {
    color: var(--zamzam-muted) !important;
}

#navbar-main .nav-link:hover,
.navbar-main .nav-link:hover,
.navbar-top .nav-link:hover {
    color: var(--zamzam-primary-bright) !important;
}


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

.card,
.card.bg-white,
.card-header,
.card-body,
.card-footer,
fieldset:not(.filepond--file-wrapper) {
    background: var(--zamzam-surface) !important;
    border-color: var(--zamzam-border) !important;
    color: var(--zamzam-text) !important;
}

.card {
    border-radius: 18px !important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        0 0 0 1px rgba(0,200,150,.035) !important;
}

.card-header {
    border-bottom-color: var(--zamzam-border) !important;
}

.card:hover {
    border-color: var(--zamzam-border-strong) !important;
}

.card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
    color: var(--zamzam-text) !important;
}


/* ============================================================
   PAGE TITLES / TEXT
   ============================================================ */

.lw-page-title,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--zamzam-text) !important;
}

p,
.text-muted,
.text-secondary {
    color: var(--zamzam-muted) !important;
}

.text-dark {
    color: var(--zamzam-text) !important;
}

.text-light {
    color: var(--zamzam-muted) !important;
}


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

a,
.main-content a:not(.btn):not(.dropdown-item):not(.nav-link) {
    color: var(--zamzam-primary-bright) !important;
}

a:hover,
.main-content a:not(.btn):not(.dropdown-item):not(.nav-link):hover {
    color: #55E0BD !important;
}


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

.btn-primary,
.btn.btn-primary {
    background: linear-gradient(
        135deg,
        var(--zamzam-primary-bright),
        var(--zamzam-primary)
    ) !important;

    border-color: var(--zamzam-primary) !important;
    color: #001614 !important;
    font-weight: 600 !important;
    box-shadow: 0 5px 16px rgba(0,200,150,.18) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: var(--zamzam-primary-dark) !important;
    border-color: var(--zamzam-primary-dark) !important;
    color: #FFFFFF !important;
}

.btn-outline-primary {
    color: var(--zamzam-primary-bright) !important;
    border-color: var(--zamzam-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--zamzam-primary) !important;
    border-color: var(--zamzam-primary) !important;
    color: #001614 !important;
}


/* ============================================================
   SECONDARY / DARK BUTTONS
   ============================================================ */

.btn-secondary,
.btn-dark {
    background: var(--zamzam-surface-3) !important;
    border-color: var(--zamzam-border-strong) !important;
    color: var(--zamzam-text) !important;
}

.btn-secondary:hover,
.btn-dark:hover {
    background: var(--zamzam-surface-2) !important;
    border-color: var(--zamzam-primary) !important;
}


/* ============================================================
   TABLES
   ============================================================ */

.table,
table.dataTable {
    background: var(--zamzam-surface) !important;
    color: var(--zamzam-text) !important;
}

.table thead,
.table thead th,
table.dataTable thead,
table.dataTable thead th,
.thead-light th {
    background: var(--zamzam-surface-2) !important;
    color: var(--zamzam-text) !important;
    border-color: var(--zamzam-border) !important;
}

.table td,
.table th,
table.dataTable td,
table.dataTable th {
    border-color: var(--zamzam-border) !important;
    color: var(--zamzam-muted) !important;
}

.table tbody tr:hover,
.table-hover tbody tr:hover {
    background: var(--zamzam-surface-2) !important;
}

.table tbody tr:hover td {
    color: var(--zamzam-text) !important;
}


/* ============================================================
   FORMS
   ============================================================ */

.form-control,
.custom-select,
.form-control.bg-white {
    background: var(--zamzam-surface-2) !important;
    color: var(--zamzam-text) !important;
    border-color: var(--zamzam-border) !important;
}

.form-control::placeholder {
    color: #71908B !important;
}

.form-control:focus,
.custom-select:focus {
    background: var(--zamzam-surface-2) !important;
    color: var(--zamzam-text) !important;
    border-color: var(--zamzam-primary) !important;
    box-shadow: 0 0 0 .15rem rgba(0,200,150,.12) !important;
}


/* ============================================================
   DROPDOWNS
   ============================================================ */

.dropdown-menu {
    background: var(--zamzam-surface) !important;
    border-color: var(--zamzam-border) !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.35) !important;
}

.dropdown-item {
    color: var(--zamzam-muted) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active {
    background: var(--zamzam-surface-2) !important;
    color: var(--zamzam-primary-bright) !important;
}


/* ============================================================
   TABS
   ============================================================ */

.nav-tabs {
    border-color: var(--zamzam-border) !important;
}

.nav-tabs .nav-link {
    color: var(--zamzam-muted) !important;
    border-color: transparent !important;
}

.nav-tabs .nav-link:hover {
    color: var(--zamzam-primary-bright) !important;
}

.nav-tabs .nav-link.active {
    background: var(--zamzam-surface-2) !important;
    border-color: var(--zamzam-primary) !important;
    color: var(--zamzam-primary-bright) !important;
}


/* ============================================================
   PAGINATION
   ============================================================ */

.page-link {
    background: var(--zamzam-surface) !important;
    border-color: var(--zamzam-border) !important;
    color: var(--zamzam-primary-bright) !important;
}

.page-item.active .page-link {
    background: var(--zamzam-primary) !important;
    border-color: var(--zamzam-primary) !important;
    color: #001614 !important;
}


/* ============================================================
   ALERTS / STATUS
   ============================================================ */

.alert {
    border-radius: 12px !important;
}

.alert-success {
    background: rgba(25,195,125,.13) !important;
    border-color: rgba(25,195,125,.30) !important;
    color: #73E7B2 !important;
}

.alert-warning {
    background: rgba(245,185,66,.13) !important;
    border-color: rgba(245,185,66,.30) !important;
    color: #FFD879 !important;
}

.alert-danger {
    background: rgba(255,83,100,.13) !important;
    border-color: rgba(255,83,100,.30) !important;
    color: #FF9BA6 !important;
}

.alert-info {
    background: rgba(53,185,255,.13) !important;
    border-color: rgba(53,185,255,.30) !important;
    color: #8BD9FF !important;
}


/* ============================================================
   BADGES
   ============================================================ */

.badge-success {
    background: var(--zamzam-success) !important;
    color: #001614 !important;
}

.badge-primary {
    background: var(--zamzam-primary) !important;
    color: #001614 !important;
}

.badge-warning {
    background: var(--zamzam-warning) !important;
    color: #001614 !important;
}


/* ============================================================
   MODALS / SWEETALERT
   ============================================================ */

.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background: var(--zamzam-surface) !important;
    color: var(--zamzam-text) !important;
    border-color: var(--zamzam-border) !important;
}

.modal-header {
    border-bottom-color: var(--zamzam-border) !important;
}

.modal-footer {
    border-top-color: var(--zamzam-border) !important;
}

div:where(.swal2-container) div:where(.swal2-popup) {
    background: var(--zamzam-surface) !important;
    color: var(--zamzam-text) !important;
    border: 1px solid var(--zamzam-border) !important;
}

div:where(.swal2-container) .swal2-title {
    color: var(--zamzam-text) !important;
}

div:where(.swal2-container) .swal2-html-container {
    color: var(--zamzam-muted) !important;
}


/* ============================================================
   BREADCRUMBS
   ============================================================ */

.breadcrumb,
.breadcrumb.bg-white {
    background: var(--zamzam-surface) !important;
    border-color: var(--zamzam-border) !important;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--zamzam-muted) !important;
}

.breadcrumb-item.active {
    color: var(--zamzam-primary-bright) !important;
}


/* ============================================================
   DATATABLES
   ============================================================ */

.dataTables_wrapper,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    color: var(--zamzam-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--zamzam-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--zamzam-primary) !important;
    border-color: var(--zamzam-primary) !important;
    color: #001614 !important;
}


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

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--zamzam-primary) !important;
    border-color: var(--zamzam-primary) !important;
}


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

* {
    scrollbar-color: var(--zamzam-surface-3) var(--zamzam-bg-deep);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--zamzam-bg-deep);
}

::-webkit-scrollbar-thumb {
    background: var(--zamzam-surface-3);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--zamzam-primary-dark);
}


/* ============================================================
   VENDOR / DASHBOARD STAT ICONS
   BLUTIK API Admin Dashboard Theme
   ============================================================ */

.stats-icon,
.stats-icon-secondary,
.gradient-icon-lg-2,
.gradient-icon-lg-4,
.gradient-icon-lg-5,
.gradient-icon-lg-7,
.gradient-icon-lg-8,
.gradient-icon-lg-9 {
    background: #FFFFFF !important;
    color: #123A70 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #123A70 !important;
}

.stats-icon i,
.stats-icon-secondary i,
.gradient-icon-lg-2 i,
.gradient-icon-lg-4 i,
.gradient-icon-lg-5 i,
.gradient-icon-lg-7 i,
.gradient-icon-lg-8 i,
.gradient-icon-lg-9 i {
    color: #123A70 !important;
}


/* ============================================================
   WHITE UTILITY BACKGROUNDS
   ============================================================ */

.bg-white {
    background-color: var(--zamzam-surface) !important;
}

.text-white {
    color: var(--zamzam-text) !important;
}


/* ============================================================
   CHAT WINDOW
   ============================================================ */

.lw-whatsapp-chat-block-container,
.lw-whatsapp-chat-window {
    background: var(--zamzam-surface) !important;
    color: var(--zamzam-text) !important;
}

.lw-whatsapp-chat-window .conversation {
    background: var(--zamzam-bg) !important;
}


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

@media (max-width: 767.98px) {

    .navbar.lw-sidebar-container {
        background: var(--zamzam-bg-deep) !important;
    }

    .main-content {
        background: var(--zamzam-bg) !important;
    }

    .card {
        border-radius: 14px !important;
    }

}


/* ============================================================
   PREMIUM CARD EFFECT
   ============================================================ */

.card-header,
.card-body {
    position: relative;
}

.card-header {
    background: linear-gradient(
        180deg,
        rgba(0,200,150,.035),
        transparent
    ) !important;
}

</style>


<style id="zamzam-admin-sidebar-fix">
/* =========================================================
   ZAMZAM ADMIN SIDEBAR — LAYOUT FIX
   Keep sidebar fully visible on desktop.
   ========================================================= */

@media (min-width: 768px) {

    /* Fixed desktop sidebar */
    .navbar.lw-sidebar-container.navbar-vertical.navbar-expand-md {
        width: 248px !important;
        max-width: 248px !important;
        min-width: 248px !important;

        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        z-index: 1030 !important;

        background:
            linear-gradient(
                180deg,
                #032B28 0%,
                #001F1D 100%
            ) !important;

        border-right: 1px solid rgba(0,200,150,.22) !important;

        box-shadow:
            8px 0 30px rgba(0,0,0,.16) !important;
    }

    /* Prevent Argon from shrinking the sidebar */
    .navbar.lw-sidebar-container.navbar-vertical.navbar-expand-md:hover,
    .navbar.lw-sidebar-container.navbar-vertical.navbar-expand-md:focus-within {
        width: 248px !important;
        max-width: 248px !important;
    }

    /* Sidebar inner container */
    .navbar.lw-sidebar-container > .container-fluid {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Main content must leave room for sidebar */
    .main-content {
        margin-left: 248px !important;
        width: calc(100% - 248px) !important;
        min-width: 0 !important;
    }

    /* Top navbar/content alignment */
    #navbar-main {
        margin-left: 248px !important;
        width: calc(100% - 248px) !important;
    }

    /* Sidebar brand area */
    .lw-sidebar-container .navbar-brand {
        width: 100% !important;
        height: 76px !important;

        display: flex !important;
        align-items: center !important;

        padding: 14px 22px !important;
        margin-right: 0 !important;
    }

    .lw-sidebar-container .lw-sidebar-logo-normal {
        display: inline-block !important;
        max-height: 46px !important;
        max-width: 190px !important;
        object-fit: contain !important;
        margin: 0 !important;
    }

    .lw-sidebar-container .lw-sidebar-logo-small {
        display: none !important;
    }

    /* Navigation */
    .lw-sidebar-container .navbar-collapse {
        width: 100% !important;
        margin: 0 !important;
        padding: 8px 12px 24px !important;
    }

    .lw-sidebar-container .navbar-nav {
        width: 100% !important;
        margin: 0 !important;
    }

    .lw-sidebar-container .navbar-nav .nav-item {
        width: 100% !important;
    }

    .lw-sidebar-container .navbar-nav .nav-link {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        min-height: 46px !important;

        padding: 10px 14px !important;
        margin: 3px 0 !important;

        color: #9BB8B3 !important;

        border-radius: 10px !important;

        white-space: normal !important;

        transition:
            background .18s ease,
            color .18s ease,
            transform .18s ease !important;
    }

    /* Sidebar icons */
    .lw-sidebar-container .navbar-nav .nav-link > i,
    .lw-sidebar-container .navbar-nav .nav-link i {
        width: 28px !important;
        min-width: 28px !important;

        margin-right: 10px !important;

        color: #79A9A1 !important;

        font-size: 16px !important;
        text-align: center !important;
    }

    /* Override inline icon colors */
    .lw-sidebar-container .navbar-nav .nav-link i[style] {
        color: #79A9A1 !important;
    }

    /* Text */
    .lw-sidebar-container .nav-link-text {
        color: inherit !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
    }

    /* Hover */
    .lw-sidebar-container .navbar-nav .nav-link:hover,
    .lw-sidebar-container .navbar-nav .nav-link:focus {
        color: #F4FFFC !important;

        background:
            rgba(0,200,150,.10) !important;

        transform: translateX(2px) !important;
    }

    .lw-sidebar-container .navbar-nav .nav-link:hover > i,
    .lw-sidebar-container .navbar-nav .nav-link:focus > i {
        color: #00C896 !important;
    }

    /* Active item */
    .lw-sidebar-container .navbar-nav .nav-link.active,
    .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link {
        color: #F4FFFC !important;

        background:
            linear-gradient(
                135deg,
                rgba(0,200,150,.20),
                rgba(0,127,104,.14)
            ) !important;

        border: 1px solid rgba(0,200,150,.18) !important;

        box-shadow:
            inset 3px 0 0 #00C896,
            0 5px 18px rgba(0,0,0,.12) !important;
    }

    .lw-sidebar-container .navbar-nav .nav-link.active > i,
    .lw-sidebar-container .navbar-nav .nav-item.active > .nav-link > i {
        color: #00C896 !important;
    }

    /* Nested menus */
    .lw-sidebar-container .navbar-nav .nav {
        width: 100% !important;
        padding-left: 10px !important;
        margin: 2px 0 6px !important;
    }

    .lw-sidebar-container .navbar-nav .nav .nav-link {
        min-height: 40px !important;
        padding: 8px 12px !important;
        font-size: 13px !important;
    }

    .lw-sidebar-container .navbar-nav .nav .nav-link > i {
        font-size: 13px !important;
        width: 25px !important;
        min-width: 25px !important;
    }

    /* Collapse arrows */
    .lw-sidebar-container .nav-link[data-toggle="collapse"]:after {
        color: #79A9A1 !important;
    }

    /* Sidebar separators */
    .lw-sidebar-container hr,
    .lw-sidebar-container .dropdown-divider {
        border-color: rgba(0,200,150,.12) !important;
    }
}

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

@media (max-width: 767.98px) {

    .navbar.lw-sidebar-container.navbar-vertical {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    #navbar-main {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .lw-sidebar-container .navbar-collapse {
        background: #032B28 !important;
        border-radius: 0 0 14px 14px !important;
    }
}

/* =========================================================
   END ADMIN SIDEBAR FIX
   ========================================================= */
</style>


<style id="zamzam-admin-layout-final">
/* =========================================================
   ZAMZAM ADMIN — FINAL CONTENT ALIGNMENT
   navbar-main is INSIDE .main-content, so it must not receive
   another 248px horizontal offset.
   ========================================================= */

@media (min-width: 768px) {

    .main-content {
        margin-left: 248px !important;
        width: calc(100% - 248px) !important;
        min-width: 0 !important;
    }

    .main-content #navbar-main,
    #navbar-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: auto !important;
        right: auto !important;
    }

    .main-content > .container-fluid,
    .main-content > .container,
    .main-content > .container-fluid > .row {
        max-width: 100% !important;
    }
}

@media (max-width: 767.98px) {

    .main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }

    .main-content #navbar-main,
    #navbar-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   END FINAL CONTENT ALIGNMENT
   ========================================================= */
</style>

<style id="zamzam-admin-sidebar-colors">
/* =========================================================
   ZAMZAM ADMIN — SIDEBAR COLOR FIX
   Layout is already correct; fix Argon light-theme overrides.
   ========================================================= */

@media (min-width: 768px) {

    /* Sidebar itself */
    #sidenav-main.lw-sidebar-container,
    .lw-sidebar-container.navbar-light,
    .lw-sidebar-container.bg-white {
        background: linear-gradient(180deg, #032B28 0%, #001F1D 100%) !important;
        background-color: #032B28 !important;
        border-right: 1px solid rgba(0, 200, 150, .22) !important;
        box-shadow: 4px 0 20px rgba(0, 0, 0, .18) !important;
    }

    /* Sidebar container */
    #sidenav-main .container-fluid {
        background: transparent !important;
    }

    /* Normal menu text */
    #sidenav-main.navbar-light .navbar-nav .nav-link,
    #sidenav-main .navbar-nav .nav-link,
    #sidenav-main .nav-link,
    #sidenav-main .nav-link span,
    #sidenav-main .nav-link .nav-link-text {
        color: #F4FFFC !important;
    }

    /* Icons */
    #sidenav-main .nav-link i,
    #sidenav-main .nav-link svg,
    #sidenav-main .nav-link .fa,
    #sidenav-main .nav-link .fas,
    #sidenav-main .nav-link .far,
    #sidenav-main .nav-link .ni {
        color: #9BB8B3 !important;
    }

    /* Hover */
    #sidenav-main .nav-item > .nav-link:hover {
        color: #FFFFFF !important;
        background: rgba(0, 200, 150, .10) !important;
        border-radius: 10px !important;
    }

    #sidenav-main .nav-item > .nav-link:hover i,
    #sidenav-main .nav-item > .nav-link:hover svg {
        color: #00C896 !important;
    }

    /* Active menu */
    #sidenav-main .nav-item > .nav-link.active {
        color: #FFFFFF !important;
        background: linear-gradient(
            90deg,
            rgba(0, 200, 150, .22),
            rgba(0, 200, 150, .08)
        ) !important;
        border-left: 3px solid #00C896 !important;
        border-radius: 0 10px 10px 0 !important;
    }

    #sidenav-main .nav-item > .nav-link.active i,
    #sidenav-main .nav-item > .nav-link.active svg {
        color: #00C896 !important;
    }

    /* Dropdown / nested menu */
    #sidenav-main .nav .nav .nav-link,
    #sidenav-main .nav .nav .nav-link span {
        color: #B9D3CE !important;
    }

    #sidenav-main .nav .nav .nav-link:hover {
        color: #FFFFFF !important;
        background: rgba(0, 200, 150, .08) !important;
    }

    /* Section separators / text */
    #sidenav-main hr {
        border-color: rgba(0, 200, 150, .18) !important;
    }

    /* Logo area */
    #sidenav-main .lw-sidebar-logo-container,
    #sidenav-main .navbar-brand {
        background: transparent !important;
    }
}

/* =========================================================
   TOP ADMIN NAVBAR
   ========================================================= */

#navbar-main {
    background: #032B28 !important;
    border-bottom: 1px solid rgba(0, 200, 150, .22) !important;
}

#navbar-main .navbar-nav .nav-link,
#navbar-main .navbar-brand,
#navbar-main .navbar-text {
    color: #F4FFFC !important;
}

#navbar-main .nav-link i,
#navbar-main .nav-link svg {
    color: #9BB8B3 !important;
}

/* Mobile */
@media (max-width: 767.98px) {

    #sidenav-main.lw-sidebar-container,
    .lw-sidebar-container.navbar-light,
    .lw-sidebar-container.bg-white {
        background: #032B28 !important;
    }

    #sidenav-main .navbar-nav .nav-link,
    #sidenav-main .nav-link,
    #sidenav-main .nav-link span {
        color: #F4FFFC !important;
    }
}

/* =========================================================
   END SIDEBAR COLOR FIX
   ========================================================= */
</style>