@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }
    .main-header .navbar-custom-menu .dropdown-menu {
        left: auto !important;
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
    .main-header .navbar {
        height: auto;
    }
}



.bg-danger {
    background-color: #f2dede !important;
}
.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
    font-size: 8px;
    vertical-align: middle;
}

.pt-0 {
    padding-top: 0px;
}
.f-right {
    float: right;
}
.mb-10 {
    margin-bottom: 10px;
}
.discount-badge {
    sition: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    padding: 7px;
}

.discount-badge-small {
    position: absolute;
    top: -2px;
    left: 10px;
    font-size: 12px;
    padding: 6px;
}
.product-info-table td, .product-info-table th {
    font-size: 12px;
}
.catalogue {
    max-height: 127px;
    margin: auto;
    margin-bottom: 18px;
}
.catalogue-title {
    display: inline-block;
    font-size: 18px;
    margin: 0;
    line-height: 1;
    margin-bottom: 10px;
}
.bg-light-gray {
    background-color: #f8f8f8 !important;
}
.p-5-5 {
    padding: 5px 5px !important;
}
.m-4 {
    margin: 4px;
}
.skin-black .main-header, .skin-black-light .main-header {
    color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
    color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
    color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
    color: #999 !important;
}
.mt-0{
    margin-top: 0 !important;
}
.table-pdf thead tr{
    background-color: #357ca5 !important;
    color: #fff;
}
.table-pdf thead tr th {
    color: #fff !important;
}
.blue-heading {
    background-color: #357ca5;
    color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
    padding: 4px;
}
.p-10{
    padding: 10px !important;
}
.jquery-top-scrollbar{
    height: 6px !important;
}
.jquery-top-scrollbar div {
    height: 6px !important;
}
.scroll-top-bottom {
    width: 100%;
    overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
    height: 6px;
}

.scrolltop {
    display:none;
    width:100%;
    margin:0 auto;
    position:fixed;
    bottom:20px;
    right:10px;
}
.scroll {
    position:absolute;
    right:20px;
    bottom:20px;
    background:#b2b2b2;
    background:rgba(178,178,178,0.7);
    padding:7px;
    text-align: center;
    margin: 0 0 0 0;
    cursor:pointer;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    border-radius: 6px;
}
.scroll:hover {
    background:rgba(178,178,178,1.0);
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}
.scroll:hover .fas {
    padding-top:-10px;
}
.scroll .fas {
    font-size:25px;
    margin-top:-5px;
    margin-left:1px;
    transition: 0.5s;
    -moz-transition: 0.5s;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
}

.f-left {
    float: left;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}

.table-pdf {
    border-collapse: collapse;
    width: 100%;
    border-spacing: 8px 10px;
}
.td-border td, .td-border th{
    border-bottom: 1px solid lightgrey;
    padding: 8px 5px;
}

.ws-nowrap {
    white-space:nowrap;
}

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
    margin-top: 5px !important;
}
.pos-form-actions{
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    position: fixed;
    bottom: 0px;
    background-color: #D1D5DC;
    width: 100%;
    z-index: 1000;
}
.mb-12 {
    margin-bottom: 12px !important;
}
.pb-0{
    padding-bottom: 0px !important;
}
.pr-12{
    padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
}
.margin-bottom-20 {
    margin-bottom: 20px !important;
}
.text-white {
    color: #fff;
}
.wizard > .steps > ul > li {
    width: 33.33% !important;
}
.wizard > .content {
    background: #445867 !important;
}
legend {
    color: #fff;
    margin-bottom: 6px;
    border-bottom: none;
}
.left-col {
    background: url(../img/home-bg.png);
    text-align: center;
    background-size: cover;
    background-position: center;
}
.left-col-content {
    color: #1A7BF9;
    width: 100%;
}
.login-header {
    font-size: 27px;
    font-weight: 600;
}
.login-header a {
    color: #fff;
}
.form-header {
    font-size: 18px;
    margin: 16px 0;
}
.btn-login {
    padding: 6px 52px !important;
}
.right-col {
    background-color: #021123;
    height: 100%;
    min-height: 100vh;
}

.right-col label {
    color: #fff;
}

.right-col a, .text-white a {
    color: #fff;
    font-weight: 600;
    font-size: 15px
}
.right-col a:hover, .text-white a:hover {
    color: #ccc;
}
.right-col-content {
    padding: 10% 16%;
    padding-bottom: 3%;
}
.right-col-content-register {
    padding: 2% 8%;
}

.input_inline {
    width: 100%;
    display: inline-flex;
}
.input_inline input, .input_inline span {
    width: 50%;
}
.bg-manufacturing {
    background-color: #ff851b;
}
.img-thumbnail {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
    transition: border .2s ease-in-out;
    padding: 4px;
    margin: 3px;
    text-align: center;
}
.img-thumbnail>.badge{
    position: absolute;
    top: -5px;
    right: -7px;
    font-size: 9px;
    font-weight: 400;
    cursor: pointer;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
    max-height: 350px;
}
.bg-aqua-lite {
    background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
    white-space: normal;
}
.spacer {
    margin-top: 20px;
}
#product_list_body {
    max-height: 500px;
    /* overflow-y: scroll;
    overflow-x: hidden; */
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9;
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
    display: inline-table;
}

.label-round{
    font-size: 8px;
    border-radius: 44%;
}
.table>tbody+tbody{
    border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
    padding-left: 12px !important;
}
table tbody td.pl-20-td{
    padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child,
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
    border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2),
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
    border-right: 1px solid darkgray;
    border-left: 1px solid darkgray;
}
.bg-transparent{
    background-color: transparent !important;
}
.mb-0{
    margin-bottom: 0;
}

.nav-tabs>li>a{
    font-size: 18px;
    font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
    white-space:nowrap;
}
.font-17{
    font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
    color: red !important;
}
/*  pos tab */
div.pos-tab-container{
    z-index: 10;
    background-color: #ffffff;
    padding: 0 !important;
    border-radius: 4px;
    -moz-border-radius: 4px;
    border:1px solid #ddd;
    margin-bottom: 28px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
    -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    background-clip: padding-box;
}
div.pos-tab-menu{
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
    margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
    margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .glyphicon,
div.pos-tab-menu div.list-group>a .fa {
    color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
    border-top-right-radius: 0;
    -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
    border-bottom-right-radius: 0;
    -moz-border-bottom-right-radius: 0;
}
div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .glyphicon,
div.pos-tab-menu div.list-group>a.active .fa{
    background-color: #4071f4;
    color: #ffffff;
    border-color: #4071f4;
}
div.pos-tab-menu div.list-group>a.active:after{
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -13px;
    border-left: 0;
    border-bottom: 13px solid transparent;
    border-top: 13px solid transparent;
    border-left: 10px solid #4071f4;
}

div.pos-tab-content{
    background-color: #ffffff;
    /* border: 1px solid #cde2fd; */
    padding-left: 20px;
    padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
    display: none;
}

.add-product-price-table th{
    background-color: #cde2fd;
    color: white;
}
.blue-header th {
    background-color: #0e1944;
    color: white;
}
.table-th-green th{
    background-color: #cde2fd;
    color: white;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
.active-cell {
    border: 2px dotted #0e1944 !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
/*#JCN Begin*/
.pos_product_div{
    min-height: 80vh; /*Side Left, adding products in POS*/
    max-height: 80vh; /* Lef Side */
    overflow-y: auto;
    /*margin-bottom: 15px; */
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border:1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"]{
    display: none;
}
.option-div-group .icon {
    color: #d33724;
    display: none;
}
.option-div-group .option-div:hover{
    border:1px solid gray;
}
.option-div-group .active .icon{
    display: block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #0e1944 !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #337ab7 !important;
}
ul.dt-button-collection{
    background-color: #00c0ef;
}
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 10px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 5px;
}
.icon-link{
    text-align:center;
    display:block;
    margin-bottom: 18px;
}
.icon-link > a {
    display:grid;
}
.icon-link > .badge{
    position: absolute;
    top: 20px;
    right: 67px;
}
.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}
.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
::-webkit-scrollbar {
    width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Custom scroll bar end*/

.product_cell{
    height: 100px;
    padding: 1%;
}
.product_cell_div{
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
    display: none;
}
@media print{
    .print_section{
        display: inline !important;
    }
    .modal-xl{
        width: 100% !important;
    }
    ::-webkit-scrollbar{
        display: none !important;
    }
    #toast-container {
        display: none;
    }
}

.input-number .btn-default{
    background-color: white;
    padding: 6px 9px;
}

.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.width-60{
    width: 60% !important;
}
.width-100{
    width: 100% !important;
}

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 23px !important;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td{
    border-left: 0px !important;
    border-right: 0px !important;
}
.table-no-side-cell-border th{
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 50px;
    width: 50px;
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 8px;
    padding-right: 8px;
}

small.text-muted {
    margin-top: 30px;
}


small.text.text-muted {
    margin-top: 3px;
}


button.btn.btn-xs.btn-warning.toggle_woocomerce_sync {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright yellow to a darker yellow */
    border: 2px solid #001a66 !important; /* Border matching the darker yellow shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-xs.btn-warning.toggle_woocomerce_sync:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #ffffff !important; /* Keep the border color consistent */
}

input.btn.btn-xs.btn-warning {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright yellow to a darker yellow */
    border: 2px solid #001a66 !important; /* Border matching the darker yellow shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
    height: auto !important; /* Ensures the height is appropriate for input buttons */
    line-height: normal !important; /* Normal line height for text alignment */
}

input.btn.btn-xs.btn-warning:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #001a66 !important; /* Keep the border color consistent */
}

button.btn.btn-xs.bg-navy.update_product_location {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #001f3f, #001437) !important; /* Gradient from navy blue to a slightly darker navy blue */
    border: 2px solid #001437 !important; /* Border matching the darker navy shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-xs.bg-navy.update_product_location:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001437, #001f3f) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #001437 !important; /* Keep the border color consistent */
}

button.btn.btn-xs.btn-success.update_product_location {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #28a745, #1e7e34) !important; /* Gradient from bright green to darker green */
    border: 2px solid #1e7e34 !important; /* Border matching the darker green shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-xs.btn-success.update_product_location:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #1e7e34, #28a745) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #1e7e34 !important; /* Keep the border color consistent */
}

input.btn.btn-xs.btn-danger {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #c82333) !important; /* Gradient from bright red to a darker red */
    border: 2px solid #c82333 !important; /* Border matching the darker red shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
    height: auto !important; /* Ensures the height is appropriate for input buttons */
    line-height: normal !important; /* Normal line height for text alignment */
}

input.btn.btn-xs.btn-danger:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #c82333, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #c82333 !important; /* Keep the border color consistent */
}








.product_box {
    border: 1px solid #cccccc; /* Light gray for a softer black border */
    margin: 3px 0px 0px 0px;
    height: 120px;
    width: 130px;
    gap: 10px;
    text-align: center;
    cursor: pointer;
    font-weight: 600;
    background-color: #fff;
    border-radius: 10px;
    padding-top: 3px;
    box-shadow: 0 4px 8px rgba(10, 12, 250, 0.1); /* Add a subtle shadow */
    transition: transform 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease; /* Smooth animation */
}

.product_box:hover {
    transform: translateY(-5px); /* Moves the box slightly up */
    background-color: #f0f8ff; /* Changes the background to a light blue */
    box-shadow: 0 8px 16px rgba(10, 12, 250, 0.2); /* Deepens shadow on hover */
}

.product_box .image-container {
    margin-top: 10px;
    height: 55px;
}

.product_box .image-container .img {
    height: 50px;
    border: 3px dashed red;
}

.eq-height-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
}

.eq-height-col {
    display: flex;
}

div.pos_items_products_center {
    /* margin-right: 50px !important; */
}

.product_box .text_div {
    margin-top: 10px;
    font-size: 13px;
}

.product_box .text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 14px;
    max-height: 14px;
}


div.text_div {
    border-style: dotted;
    border-top-width: 1px;
    border-left-width: 0px;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: #999999; /* Light black color for the top border */
    margin-top: 3px;
}
div.row {

}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

.text-link:hover{
    text-decoration: underline;
}

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
    background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin: 1px;
}

.fs-10 {
    font-size: 13px;
}

.timeline-lode-more-btn {
    margin-left: 50px;
    margin-top: 25px;
    padding-right: 12px;
    padding-left: 12px;
}

.pa-0 {
    padding: 0px !important;
}

.mt-56{
    margin-top: 56px !important;
}

.m-2{
    margin: 2px !important;
}
menu icon
.treeview-menu a{
    padding-left: 25px !important;
    font-size: 95% !important;
}


/* @media only screen and (max-width: 600px) {
  .pos-form-actions{
      position: absolute;
  }
} */
.mr-8 {
    margin-right: 8px !important;
}

/* @media (max-width: 1024px) {
  .pos_form_totals{
      margin-bottom: 40px;
  }
} */

.swal-modal .swal-text {
    text-align: center;
}




.skin-black-light .main-sidebar, .skin-blue-light .main-sidebar, .skin-green-light .main-sidebar, .skin-purple-light .main-sidebar, .skin-red-light .main-sidebar, .skin-yellow-light .main-sidebar {
    background: -moz-linear-gradient(180deg, rgb(255, 255, 255) 63%, rgb(255, 255, 255) 100%) !important;
    background: -webkit-linear-gradient(180deg, rgb(255, 255, 255) 63%, rgb(255, 255, 255) 100%) !important;
    background: linear-gradient(180deg, rgb(255, 255, 255) 63%, rgb(255, 255, 255) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#005496",endColorstr="#00335c",GradientType=1) !important;
}

.skin-blue-light .sidebar-menu>li>a {
    color: #021123;
    transition: 0.5s;
}
.skin-black-light .sidebar-menu > li.active > a, .skin-black-light .sidebar-menu > li.menu-open > a, .skin-black-light .sidebar-menu > li:hover > a, .skin-blue-light .sidebar-menu > li.active > a, .skin-blue-light .sidebar-menu > li.menu-open > a, .skin-blue-light .sidebar-menu > li:hover > a, .skin-green-light .sidebar-menu > li.active > a, .skin-green-light .sidebar-menu > li.menu-open > a, .skin-green-light .sidebar-menu > li:hover > a, .skin-purple-light .sidebar-menu > li.active > a, .skin-purple-light .sidebar-menu > li.menu-open > a, .skin-purple-light .sidebar-menu > li:hover > a, .skin-red-light .sidebar-menu > li.active > a, .skin-red-light .sidebar-menu > li.menu-open > a, .skin-red-light .sidebar-menu > li:hover > a, .skin-yellow-light .sidebar-menu > li.active > a, .skin-yellow-light .sidebar-menu > li.menu-open > a, .skin-yellow-light .sidebar-menu > li:hover > a {
    background: #e1e4e7 !important;
    color: #f1f2fa;
}
.skin-black-light .sidebar-menu > li > .treeview-menu, .skin-blue-light .sidebar-menu > li > .treeview-menu, .skin-green-light .sidebar-menu > li > .treeview-menu, .skin-purple-light .sidebar-menu > li > .treeview-menu, .skin-red-light .sidebar-menu > li > .treeview-menu, .skin-yellow-light .sidebar-menu > li > .treeview-menu {
    background: #0067ff !important;
}
.skin-blue-light .sidebar-menu .treeview-menu > li.active > a {
    font-weight: 600;
    color: #000e1a;
}
.skin-blue-light .sidebar-m272727enu .treeview-menu > li.active > a, .skin-blue-light .sidebar-menu .treeview-menu > li > a:hover {
    color: #000;
}
.skin-blue-light .sidebar-menu .treeview-menu > li > a {
    color: #202e40;
}
.skin-blue-light .sidebar-menu > li.active {
    border-left-color: white;
}
.content-header > h1 > small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
    color: white;
}
.skin-blue .content-wrapper .content-header-custom, .skin-blue-light .content-wrapper .content-header-custom {
    background: #e6f4ff;
}
.content-wrapper {
    background-color: #e6f4ff;
}
.sidebar-menu li.active > a {
    font-weight: 700 !important;
}
.font-settings.btn-group.pull-right {
    bottom: 2px;
    position: fixed;
    left: 36px;
    z-index: 1001;
    background: white;
    border-radius: 7px;
}

.table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th, .table-bordered > thead > tr > th{
    color: #000000;
}
.sidepanel  {
    width: 0px;
    position: fixed;
    z-index: 100;
    height: 1000px;
    top: 0;
    left: 0;
    background-color: #8d9fad;
    overflow: auto;
    transition: 0.5s;
    padding-top: 60px;
}






@media only screen and (max-width: 800px) {
    .col-md-10 button {
        margin-bottom: 5px !important;
    }
}


/* @media only screen and (max-width: 600px) {
  .pos-form-actions{
      position: absolute;
  }
} */
.mr-8 {
    margin-right: 8px !important;
}

/* @media (max-width: 1024px) {
  .pos_form_totals{
      margin-bottom: 40px;
  }
} */

.swal-modal .swal-text {
    text-align: center;
}
/* #JCN Begin show the box TOTAL PAYMENT in the POS */


/* Keyframes for bounce animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


/* #JCN End */
.mb-40 {
    margin-bottom: 40px !important;
}
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}
fa-times{
    font-size: 30px
}
/** Add by JCN **/
/** Above there are some changes to the css for the POS style */
/** Belove the new css for the style +/
/* July 2022 testing...*/

/* To center the elements in a div */
.father_center {
    /* IMPORTANTE */
    text-align: center; /* Se requier para mostrar los elekentos centrados en el DIV*/
}
.child_center {
    background-color: yellow;
    padding: 10px;
    margin: 10px;
    /* IMPORTANTE */
    display: inline-block;
}

/*#JCN product list */
.pos_product_list{
    margin: 2px 3px 2px 3px;
    /* width:  100px;
    height: 100px; */
    display: inline-block;
}

/* JCN cfg div products and categories & products side right*/
.pos_items_featured_center{
    text-align: center; /* show the items in the center of the DIV for categories*/
    max-height: 110px;   /*Show the max-height reponsive mobile*/
    overflow-y: scroll;
    overflow-x: hidden;
    /*padding: 0px 10px 0px 10px;  To justify the buttons in the div */
    border-radius: 4px;
    border: 2px solid #fff;
}
.pos_items_category_center{
    text-align: center; /* show the items in the center of the DIV for categories*/
    max-height: 100px;   /*Show the max-height reponsive mobile*/
    overflow-y: scroll;
    overflow-x: hidden;
    /*padding: 0px 10px 0px 10px;  To justify the buttons in the div */
    border-radius: 4px;
    border: 2px solid #fff;
}
.pos_items_products_center{
    text-align: center; /* show the items in the center of the DIV for products*/
}

/*JCN Colors POS, header, divider and footer */
/* According to the var themes */

.theme_red_pos,
.theme_red-light_pos
{
    background-color: #f64e70;
    color: white;
}

.theme_red_divider,
.theme_red-light_divider{
    background-color: #f64e70;
    border-radius: 4px;
    padding: 2px 0px 2px 0px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

.theme_blue_pos,
.theme_blue-light_pos{
    background-color: #3c8dbc;
    color: white;
}

.theme_blue_divider,
.theme_blue-light_divider {
    background-color: #3c8dbc;
    border-radius: 4px;
    padding: 2px 0px 2px 0px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

.theme_purple_pos,
.theme_purple-light_pos{
    background-color: #605ca8;
    color: white;
}

.theme_purple_divider,
.theme_purple-light_divider{
    background-color: #605ca8;
    border-radius: 4px;
    padding: 2px 0px 2px 0px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

.theme_green_pos,
.theme_green-light_pos{
    background-color: #3fd595;
    color: white;
}

.theme_green_divider,
.theme_green-light_divider{
    background-color: #3fd595;
    padding: 2px 0px 2px 0px;
    border-radius: 4px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

.theme_black_pos,
.theme_black-light_pos {
    background-color:#3c3c4e;
    color: white;
}

.theme_black_divider,
.theme_black-light_divider{
    background-color: #3c3c4e;
    padding: 2px 0px 2px 0px;
    border-radius: 4px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

.theme_yellow_pos,
.theme_yellow-light_pos{
    background-color: #ffb860;
    color: white;
}

.theme_yellow_divider,
.theme_yellow-light_divider{
    background-color: #ffb860;
    padding: 2px 0px 2px 0px;
    border-radius: 4px;
    clear:both; /* Clean this class to avoid repaint in the new class */
}

/* JCN style button category *****/
.btn-prni {
    margin: 5px 0px 5px 0px;
    width:  90px;
    height: 80px;
    font-weight: 600;
    font-size: small;
    background-color: #fafbfc;
    /* border: 1px solid #6a6b6c; */
    border-radius:15px;
    cursor: pointer;
    /* box-shadow: #e04b59 0 1px 1px 1px !important; */
}

.btn-prni .text_div{
    margin-top: 2px;
}

.btn-prni .text{
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* number of lines to show */
    line-height: 14px;        /* fallback */
    max-height: 14px;       /* fallback */
}

.btn-prni img {
    max-height: 35px !important;
    min-width: 60px !important;
}

.btn-prni.active {
    background: #2c5b2c !important;
    border: 1px solid #f3f3f3;
    cursor: default;
}

.btn-default_ff:hover,
.btn-default_ff:focus
{
    background-color: #e8e9eb;
    /*border: 1px solid #e04b59; */
    cursor: pointer;
    box-shadow: #4be0a4 0 1px 2px 3px !important;
}

.btn-default_ff:target
{
    background-color: #41415e;
    border: 1px solid #e04b59;
    cursor: default;
}

/* custom css */

nav.navbar.navbar-static-top {
    background-color: #fafafa !important;
}

a.sidebar-toggle {
    color: #607d8b !important;
    background-color: #fafafa !important;
}

i.fas.fa-info-circle.pull-left.mt-10.cursor-pointer {
    background-color: #607d8b !important;
}

div div strong {
    color: #000000 !important;
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10 {
    color: #eceff1 !important;
    background-color: #fafafa !important;
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs {
    background-color: #fafafa !important;
}

button.btn.btn-success.dropdown-toggle.btn-flat.pull-left.m-8.btn-sm.mt-10 {
    background-color: #fafafa !important;
}

a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success {
    background-color: #fafafa !important;
}

i.fas.fa-plus-circle.fa-lg {
    color: #455a64 !important;
}

a.dropdown-toggle.load_notifications {
    background-color: #fafafa !important;
    color: #455a64 !important;
}



section.content-header.content-header-custom {
    background-color: #fafafa !important;
}

div.row {
    background-color: #fafafa !important;
}
a.logo {
    background-color: #fafafa !important;
    color: #455a64 !important;
}
ul li a {
    background-color: #981212 !important;
}

aside.main-sidebar {
    background-color: #fafafa !important;
}

div.content-wrapper {
    background-color: #fafafa !important;
}

div.row {
    background-color: #fafafa !important;
}

div.box-body {
    background-color: #fafafa !important;
}
button.btn.bg-purple.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    background-color: #fafafa !important;
}

button.btn.bg-yellow.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    background-color: #fafafa !important;
    color: #546e7a !important;
}

button.btn.btn-primary.btn-flat.m-6.hidden-xs.btn-xs.m-5.pull-right {
    background-color: #fafafa !important;
    color: #455a64 !important;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.pull-right.popover-default {
    background-color: #fafafa !important;
    border-style: none !important;
    color: #455a64 !important;
}

button.btn.btn-success.btn-flat.pull-right.m-5.btn-xs.mt-10.popover-default {
    background-color: #fafafa !important;
}

button.btn.btn-success.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    background-color: #fafafa !important;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    background-color: #fafafa !important;
}

a.btn.btn-info.btn-flat.m-6.btn-xs.m-5.pull-right {
    background-color: #fafafa !important;
}
button.btn.btn-prni.btn-default_ff {
    background-color: #fafafa !important;
    color: #37474f !important;
}

div.pos-form-actions.theme__pos {
    background-color: #001f3f !important;
    margin-left: -15px;
}

div p strong {
    color: #ffffff !important;
}

/* More specific selector for span.curr_datetime */
div span.curr_datetime {
    color: #ffffff!important;
}






button.btn.btn-default.bg-info.text-white.btn-flat.no-print {
    background-color: #37474f !important;
    font-size:12px!important;
}


button.btn.btn-default.bg-yellow.btn-flat {
    background-color: #37474f !important;
}


button.btn.btn-default.btn-pos.bg-info.text-white.btn-flat.no-print {
    font-size:12px!important;
}

button.btn.btn-default.btn-pos.bg-green.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
}

button.btn.bg-info.text-white.btn-default.btn-pos.btn-flat {
    font-size:12px!important;
}

button.btn.btn-default.btn-pos.bg-yellow.btn-flat {
    font-size:12px!important;
}

button.btn.bg-red.btn-default.btn-pos.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
}

button.btn.bg-purple.btn-default.btn-pos.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
}

button.btn.bg-maroon.btn-default.btn-pos.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
}

button.btn.btn-default.btn-pos.bg-maroon.btn-flat.btn-md {
    font-size:12px!important;
}


span.curr_datetime {
    color: #37474f !important;
}

i.fa.fa-keyboard.hover-q {
    color: #37474f !important;
}

div p span {
    color: #37474f !important;
}

div.col-md-5.no-padding.pr-12 {
    background-color: #fafafa !important;
}
span.curr_datetime {
    color: #37474f !important;
}

i.fa.fa-keyboard.hover-q {
    color: #ffffff !important;
    transition: all 0.3s ease-in-out;
}

i.fa.fa-keyboard.hover-q:hover {
    color: #00ff99; /* Change the icon color to a neon green */
    text-shadow: 0 0 8px #00ff99, 0 0 15px #00ff99, 0 0 20px #00ff99; /* Add a glowing text shadow */
    transform: scale(1.1); /* Slightly increase the size */
    animation: pulse 1s infinite; /* Apply a pulsing effect */
}

@keyframes pulse {
    0% {
        transform: scale(1.1); /* Slightly larger */
    }
    50% {
        transform: scale(1.2); /* Grow to 120% */
    }
    100% {
        transform: scale(1.1); /* Return to slightly larger */
    }
}

div.box-body.pos_product {
    border-style: dotted;
    margin-left: -12px;
    border-color: #0a0a20;
    border-width: 2px;
    border-radius: 0px;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 8px rgba(10, 50, 40, 20.2);
    backdrop-filter: blur(10px);
}

/* shourov pos header catagory */
button.btn.btn-prni.btn-default_ff {
    /* Basic button styling */
    width: 110px;
    height: 90px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500; /* Slightly lighter font for a minimal look */
    color: #333; /* Darker text color for minimalism */
    background-color: #f0f0f0; /* Soft background color */
    border: 2px solid transparent;
    border-radius: 8px; /* Softly rounded corners */
    transition: all 0.3s ease;

    /* Unique border style */
    background-image: linear-gradient(white, white),
    linear-gradient(to right, #050F2BFF, #050F2BFF);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: 2px solid transparent; /* Transparent border with a gradient effect */

    /* Subtle box shadow for elevation */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    /* Adding a subtle hover effect */
    cursor: pointer;
}

button.btn.btn-prni.btn-default_ff:hover {
    background-color: #ffffff; /* Lighter color on hover */
    color: #2575fc; /* Color change to match the gradient */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Slightly deeper shadow on hover */
    transform: scale(1.02); /* Small scale effect for interaction */
}


/* shourov pos header catagory end */


/* pos button style start */
.pos-total {
    margin-left: -50px!important;
    width: 300px !important;
    display: inline-block;
    padding: 3px 5px;
    vertical-align: middle;
    border: 2px inset rgba(255, 255, 255, 0.8);
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    max-height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-transition: background-color 0.3s ease, box-shadow 0.3s ease;
    -moz-transition: background-color 0.3s ease, box-shadow 0.3s ease;
    -ms-transition: background-color 0.3s ease, box-shadow 0.3s ease;
    -o-transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.pos-total:hover {
    background-color: rgba(255, 255, 255, 0.2); /* Lightens background color on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Increases shadow for a more prominent effect */
}

.pos-total span.number {
    font-size: 24px; /* Font size for prominence */
    font-weight: bolder;
    color: #fff; /* White text color */
}

.pos-total span.text {
    font-weight: bolder;
    vertical-align: middle;
    color: #fff; /* White text color */
    flex-grow: 1; /* Allow text to take up available space */
}

.pos-total .icon {
    font-size: 24px; /* Size of the icon */
    color: #fff; /* White color for the icon */
    animation: bounce 2s infinite; /* Adds a bouncing animation to the icon */
}

button.btn.bg-yellow.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    height: 30px !important;
    width: 30px!important;
}

button.btn.btn-primary.btn-flat.m-6.hidden-xs.btn-xs.m-5.pull-right {
    width: 30px !important;
    height: 30px !important;
}

i.fa.fa-window-maximize.fa-lg {
    margin-left: -8px !important;
    margin-bottom: -px;
    margin-top: -px;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.pull-right.popover-default {
    width: 30px !important;
    height: 30px!important;
}

button.btn.btn-success.btn-flat.pull-right.m-5.btn-xs.mt-10.popover-default {
    width: 30px!important;
    height: 30px!important;
}

button.btn.btn-success.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    width: 30px!important;
    height: 30px!important;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    width: 30px!important;
    height: 30px!important;
}

i.fa.fa-window-close.fa-lg {
    color: #ffffff!important;

}


/* Maroon Button */
button.btn.bg-maroon.btn-default.btn-flat.no-print.pos-express-finalize,
button.btn.btn-default.bg-maroon.btn-flat.btn-md {
    font-size:12px!important;

    width: auto !important;

    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #a52a2a, #800000) !important; /* Gradient from lighter to darker maroon */
    border: 2px solid #4b0000 !important; /* Darker border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.bg-maroon.btn-default.btn-flat.no-print.pos-express-finalize:hover,
button.btn.btn-default.bg-maroon.btn-flat.btn-md:hover {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #800000, #4b0000) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #ffffff !important; /* Change the border color to gold on hover */
}

/* Purple Button */
button.btn.bg-purple.btn-default.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #6a0dad, #4b0082) !important; /* Gradient from lighter purple to darker purple */
    border: 2px solid #3a005f !important; /* Darker border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.bg-purple.btn-default.btn-flat.no-print.pos-express-finalize:hover {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ecebe8 !important; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #4b0082, #3a005f) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #fbf9f0 !important; /* Change the border color to gold on hover */
}

/* Red Button */
button.btn.bg-red.btn-default.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #ff6347, #c50000) !important; /* Gradient from a lighter red to a darker red */
    border: 2px solid #8b0000 !important; /* Darker border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.bg-red.btn-default.btn-flat.no-print.pos-express-finalize:hover {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #f6f6f6 !important; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #c50000, #8b0000) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #f6f6f5 !important; /* Change the border color to gold on hover */
}

/* Yellow Button */
button.btn.btn-default.bg-yellow.btn-flat {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #4903a3, #010b25) !important; /* Gradient from a lighter yellow (gold) to a darker yellow */
    border: 2px solid #0640da !important; /* Darker yellow border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.btn-default.bg-yellow.btn-flat:hover {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #800000 !important; /* Change the text color to a deep maroon */
    background: linear-gradient(145deg, #ffcc00, #b8860b) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #800000 !important; /* Change the border color to match the text */
}

/* Info Button */
button.btn.bg-info.text-white.btn-default.btn-flat {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #00bfff, #1e90ff) !important; /* Gradient from a lighter sky blue to a darker blue */
    border: 2px solid #007acc !important; /* Darker blue border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.bg-info.text-white.btn-default.btn-flat:hover {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important; /* Change the text color to a soft yellow */
    background: linear-gradient(145deg, #1e90ff, #007acc) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #ffffff !important; /* Change the border color to match the soft yellow text */
}

/* Green Button */
button.btn.btn-default.bg-green.btn-flat.no-print.pos-express-finalize {
    font-size:12px!important;
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #32cd32, #228b22) !important; /* Gradient from a lighter green to a darker green */
    border: 2px solid #006400 !important; /* Darker green border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.btn.btn-default.bg-green.btn-flat.no-print.pos-express-finalize:hover {
    font-size:12px!important;
    width:auto !important;
    height: 40px !important;
    color: #ffffff !important; /* Change the text color to a bright yellow */
    background: linear-gradient(145deg, #228b22, #006400) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #ffffff !important; /* Change the border color to match the bright yellow text */
}

button.btn.btn-default.bg-white.btn-flat {
    margin-left: 5px!important;
}

i.fa.fa-search.text-primary.fa-lg {
    color: #ffffff!important;

}

i.fa.fa-plus-circle.text-primary.fa-lg {
    color: #ffffff!important;
}


/* Recent Transaction Button */
button.recent_transaction_button.btn.btn-default.bg-red.text-white.btn-flat.no-print {
    width: auto!important;
    height: auto !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #041227FF, #041227FF) !important; /* Gradient for a dark effect */
    border: 2px solid #041227FF !important; /* Matching border */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.recent_transaction_button.btn.btn-default.bg-red.text-white.btn-flat.no-print:hover {
    width:auto !important;
    height: 40px !important;
    color: #ffffff !important; /* Consistent white text */
    background: linear-gradient(145deg, #041227FF, #041227FF) !important; /* Maintain gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #ffffff !important; /* Keep the border consistent with text */
}

/* Primary Button */
button.pull-right.btn.btn-primary.btn-flat {
    width: auto !important;
    height: 40px !important;
    color: #ffffff !important;
    background: linear-gradient(145deg, #007bff, #0056b3) !important; /* Gradient from a lighter blue to a darker blue */
    border: 2px solid #004085 !important; /* Darker blue border for a 3D effect */
    border-radius: 8px !important; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out !important;
}

button.pull-right.btn.btn-primary.btn-flat:hover {
    width: auto!important;
    height: 40px !important;
    color: #ffffff !important; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #0056b3, #004085) !important; /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect */
    border-color: #ffffff !important; /* Change the border color to match the gold text */
}


/* Responsive Adjustments */

/* pos button style end */
button.btn.bg-blue.btn-flat.pull-left.m-8.btn-sm.mt-10.clock_in_btn {

    width: 45px;

    color: #ffffff; /* Default white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from a blue to a darker blue */
    border: 2px solid #003399; /* Border in a darker blue */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.bg-blue.btn-flat.pull-left.m-8.btn-sm.mt-10.clock_in_btn:hover {
    color: #ffffff; /* Hover text color */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffffff; /* Change the border color to match the hover text */
}



button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs {
    width: 45px;
    color: #ffffff; /* Default white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from bright blue to dark blue */
    border: 2px solid #003399; /* Medium blue border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs:hover {
    width: 45px;
    color: #e6e600; /* Light yellow hover text color */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #e6e600; /* Match border color to the hover text */
}


button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs {
    width: 45px;
    color: #ffffff; /* Default white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from bright blue to dark blue */
    border: 2px solid #003399; /* Medium blue border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs:hover {
    width: 45px;
    color: #e6e600; /* Light yellow hover text color */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #e6e600; /* Match border color to the hover text */
}

/* Ensure icons within the button are white */
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs i,
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.popover-default.hidden-xs svg {
    color: #ffffff; /* Icon color white */
}



button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal {
    width: 45px;
    color: #ffffff; /* Default white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from bright blue to dark blue */
    border: 2px solid #003399; /* Medium blue border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal:hover {
    width: 45px;
    color: #e6e600; /* Light yellow hover text color */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #e6e600; /* Match border color to the hover text */
}

/* Ensure icons within the button are white */
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal i,
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal svg {
    color: #ffffff; /* Icon color white */
}


a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success {

    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from bright blue to dark blue */
    border: 2px solid #003399; /* Medium blue border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    text-decoration: none; /* Remove default link underline */
    display: inline-block; /* Ensure proper button display */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success:hover {

    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #ffffff; /* Optional: Change border color to match the text */
}

/* Ensure icons within the button are white */
a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success i,
a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success svg {

    color: #ffffff !important; /* Icon color white */
}

div a strong {
    color: #ffffff !important;

}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10 {

    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66); /* Gradient from bright blue to dark blue */
    border: 2px solid #003399; /* Medium blue border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    text-decoration: none; /* Remove default link underline */
    display: inline-block; /* Ensure proper button display */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10:hover {

    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001a66, #0044cc); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #ffffff; /* Optional: Change border color to match the text */
}

/* Ensure icons within the button are white */
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10 i,
button.btn.btn-success.btn-flat.pull-left.m-8.btn-sm.mt-10 svg {
    color: #ffffff !important; /* Icon color white */
}

button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal {

    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #c50000, #8b0000); /* Gradient from a bright red to a darker red */
    border: 2px solid #8b0000; /* Dark red border */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D effect */
    text-decoration: none; /* Remove default link underline */
    display: inline-block; /* Ensure proper button display */
    transition: all 0.3s ease-in-out; /* Smooth transition for hover effects */
}

button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #8b0000, #c50000); /* Invert the gradient direction on hover */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect on hover */
    border-color: #ffffff; /* Optional: Change border color to match the text */
}

/* Ensure icons within the button are white */
button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal i,
button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal svg {
    color: #ffffff !important; /* Icon color white */
}
i.fas.fa-bell {
    margin-left: -4px !important;
    margin-bottom: 5px!important;
    margin-right: 4px!important;
    margin-top: -4px!important;

}

a.dropdown-toggle.load_notifications {
    width: 35px!important;
    height: 35px!important;
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright blue to dark blue */
    border: 2px solid #003399 !important; /* Medium blue border */
    border-radius: 8px !important; /* Slightly rounded corners */
    padding: 8px 12px !important; /* Add padding for better click area */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.dropdown-toggle.load_notifications:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Same gradient as main background */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the link and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}

/* Ensure icons within the link are white */
a.dropdown-toggle.load_notifications i,
a.dropdown-toggle.load_notifications svg {
    color: #ffffff !important; /* Icon color white */
}
a.dropdown-toggle {
    color: #ffffff !important; /* Force white text color */
    text-align: center !important;
    width: auto !important;
    margin-left: 5px !important;
    margin-right: 10px !important;
    background: linear-gradient(145deg, #f3f7ff, #ececf6) !important; /* Gradient from light to dark blue */
    border: 1px solid #001a66 !important; /* Medium blue border */
    border-radius: 8px !important; /* Slightly rounded corners */
    padding: 8px 12px !important; /* Add padding for better click area */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important, -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.dropdown-toggle:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #7396f4, #7396f4) !important; /* Same gradient as main background */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the link and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5) !important, -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}

/* Style the admin icon within the button */
a.dropdown-toggle i {
    margin-right: 5px !important; /* Space between the icon and text */
    font-size: 16px !important; /* Adjust the size of the icon */
    vertical-align: middle !important; /* Align the icon vertically with the text */
    color: #ffffff !important; /* Ensure the icon color matches the text */
}


/* Ensure icons within the link are white */



/* all screen css  */

a.btn.btn-xs.btn-primary {

    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from light blue to darker blue */
    border: 2px solid #0056b3 !important; /* Border matching the darker blue shade */
    border-radius: 4px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-xs.btn-primary:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001a66, #001a66) !important; /* Invert gradient on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}



a.btn.btn-xs.btn-info {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from a bright teal to a darker teal */
    border: 2px solid #001a66 !important; /* Border matching the darker teal */
    border-radius: 4px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding suitable for extra small buttons */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-xs.btn-info:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and scale the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #0f6674 !important; /* Keep the border color consistent */
}

button.btn.btn-xs.btn-danger.delete_user_button {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #a71d2b) !important; /* Gradient from bright red to darker red */
    border: 2px solid #a71d2b !important; /* Border matching the darker red shade */
    border-radius: 4px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

button.btn.btn-xs.btn-danger.delete_user_button:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #a71d2b, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #a71d2b !important; /* Keep the border color consistent */
}


/* all button */

span.logo-lg {
    color: #001a66!important;
}


button.btn.btn-primary.btn-modal.pull-right {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from light blue to darker blue */
    border: 2px solid #0056b3 !important; /* Border matching the darker blue shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 10px 16px !important; /* Adequate padding for a prominent button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    float: right !important; /* Pulls the button to the right */
    margin-left: 8px; /* Adds some spacing if placed next to other elements */
}

button.btn.btn-primary.btn-modal.pull-right:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift and slightly enlarge the button on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}
button.btn.btn-primary {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from a bright blue to a darker blue */
    border: 2px solid #0056b3 !important; /* Border matching the darker blue shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 8px 16px !important; /* Standard padding for a medium-sized button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-primary:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #0056b3) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift and slightly enlarge the button on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}

button.btn.btn-default {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright blue to dark blue */
    border: 2px solid #003399 !important; /* Medium blue border for a defined edge */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 8px 16px; /* Standard padding for comfortable clicking */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-default:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001a66, #0044cc) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slight lift and enlargement on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}


button.btn.btn-primary.btn-big {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from light blue to darker blue */
    border: 2px solid #0056b3 !important; /* Border matching the darker blue */
    border-radius: 8px !important; /* More rounded corners for a bigger button */
    padding: 12px 20px !important; /* Larger padding for a bigger button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* 3D shadow effect for a larger button */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    font-size: 16px !important; /* Slightly larger font size for emphasis */
}

button.btn.btn-primary.btn-big:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift and slightly enlarge the button on hover */
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.3), -6px -6px 12px rgba(255, 255, 255, 0.15) !important; /* Enhanced shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}
button.btn.btn-xs.btn-danger.delete_role_button {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #e74c3c, #c0392b) !important; /* Gradient from bright red to darker red */
    border: 2px solid #c0392b !important; /* Border matching the darker red shade */
    border-radius: 4px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

button.btn.btn-xs.btn-danger.delete_role_button:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #c0392b, #e74c3c) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #c0392b !important; /* Keep the border color consistent */
}






a.btn.btn-block.btn-primary {
    color: #ffffff !important;
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright blue to dark blue */
    border: 2px solid #050f2b !important; /* Medium blue border */
    border-radius: 8px !important; /* Slightly rounded corners */
    padding: 10px 15px !important; /* Add padding for better click area */
    text-decoration: none !important; /* Remove default link underline */
    display: block !important; /* Ensure block display for full-width button */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    width: 100% !important; /* Make the button full-width */
}


a.btn.btn-block.btn-primary:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Same gradient as main background */
    transform: translateY(-5px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-block.btn-primary i,
a.btn.btn-block.btn-primary svg {
    color: #ffffff !important; /* Icon color white */
}
a.btn.btn-default.buttons-csv.buttons-html5.btn-sm {
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright blue to dark blue */
    border: 2px solid #003399 !important; /* Medium blue border */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 6px 10px !important; /* Add padding for a compact button size */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-default.buttons-csv.buttons-html5.btn-sm:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Same gradient as main background */
    transform: translateY(-4px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-default.buttons-csv.buttons-html5.btn-sm i,
a.btn.btn-default.buttons-csv.buttons-html5.btn-sm svg {
    color: #ffffff !important; /* Icon color white */
}


a.btn.btn-default.buttons-excel.buttons-html5.btn-sm {
    margin-left: 3px;
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #28a745, #1c7430) !important; /* Gradient from bright green to dark green */
    border: 2px solid #1e7e34 !important; /* Medium green border */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 6px 10px !important; /* Add padding for a compact button size */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-default.buttons-excel.buttons-html5.btn-sm:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #1c7430, #28a745) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #1e7e34 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-default.buttons-excel.buttons-html5.btn-sm i,
a.btn.btn-default.buttons-excel.buttons-html5.btn-sm svg {
    color: #ffffff !important; /* Icon color white */
}

a.btn.btn-default.buttons-print.btn-sm {
    margin-left: 3px;
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from medium gray to dark gray */
    border: 2px solid #495057 !important; /* Dark gray border */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 6px 10px !important; /* Add padding for a compact button size */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-default.buttons-print.btn-sm:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #495057 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-default.buttons-print.btn-sm i,
a.btn.btn-default.buttons-print.btn-sm svg {
    color: #ffffff !important; /* Icon color white */
}
div a span {
    color: #ffffff !important;

}
li a span {
    color: #000000!important;
}
a.btn.btn-default.buttons-collection.buttons-colvis.btn-sm {
    margin-left: 3px;
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from light blue to dark blue */
    border: 2px solid #0056b3 !important; /* Dark blue border */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 6px 10px !important; /* Add padding for a compact button size */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-default.buttons-collection.buttons-colvis.btn-sm:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0056b3, #007bff) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-default.buttons-collection.buttons-colvis.btn-sm i,
a.btn.btn-default.buttons-collection.buttons-colvis.btn-sm svg {
    color: #ffffff !important; /* Icon color white */
}









a.btn.btn-default.buttons-pdf.buttons-html5.btn-sm {

    margin-left: 3px;
    color: #ffffff !important; /* Force white text color */
    background: linear-gradient(145deg, #dc3545, #b02a37) !important; /* Gradient from bright red to dark red */
    border: 2px solid #b02a37 !important; /* Dark red border */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 6px 10px !important; /* Add padding for a compact button size */
    text-decoration: none !important; /* Remove default link underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Light and dark shadows for a 3D effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
}

a.btn.btn-default.buttons-pdf.buttons-html5.btn-sm:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #b02a37, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Lift the button and slightly increase its size on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.5), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #b02a37 !important; /* Keep the border color consistent */
}

/* Ensure icons within the button are white */
a.btn.btn-default.buttons-pdf.buttons-html5.btn-sm i,
a.btn.btn-default.buttons-pdf.buttons-html5.btn-sm svg {
    color: #ffffff !important; /* Icon color white */
}



/* end all screen css */
button.btn.bg-purple.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    color: #ffffff !important;
    background: linear-gradient(145deg, #efeef3, #f6f3f8); /* Gradient from lighter purple to darker purple */
    border: 2px solid #3a005f; /* Darker purple border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.bg-purple.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right:hover {
    color: #ffffff !important; /* Change the text color to white on hover */
    background: linear-gradient(145deg, #4b0082, #3a005f); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffcc00; /* Change the border color to match the text */
}

button.btn.bg-yellow.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    color: #ffffff !important;
    background: linear-gradient(145deg, #ffcc00, #b8860b); /* Gradient from a lighter yellow (gold) to a darker yellow */
    border: 2px solid #0640da; /* Darker yellow border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.bg-yellow.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right:hover {
    color: #800000; /* Change the text color to a deep maroon */
    background: linear-gradient(145deg, #4903a3, #010b25); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #800000; /* Change the border color to match the text */
}
button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.pull-right.popover-default {
    color: #ffffff !important;
    background: linear-gradient(145deg, #ff6347, #c50000); /* Gradient from a lighter red to a darker red */
    border: 2px solid #8b0000; /* Darker red border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.pull-right.popover-default:hover {
    color: #ffcc00; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #c50000, #8b0000); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffcc00; /* Change the border color to match the text */
}
button.btn.btn-success.btn-flat.pull-right.m-5.btn-xs.mt-10.popover-default {
    color: #ffffff !important;
    background: linear-gradient(145deg, #32cd32, #228b22); /* Gradient from a lighter green (LimeGreen) to a darker green (ForestGreen) */
    border: 2px solid #006400; /* Darker green border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.btn-success.btn-flat.pull-right.m-5.btn-xs.mt-10.popover-default:hover {
    color: #ffff00; /* Change the text color to a bright yellow */
    background: linear-gradient(145deg, #228b22, #006400); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffff00; /* Change the border color to match the text */
}
button.btn.btn-success.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    color: #ffffff !important;
    background: linear-gradient(145deg, #32cd32, #228b22); /* Gradient from a lighter green (LimeGreen) to a darker green (ForestGreen) */
    border: 2px solid #006400; /* Darker green border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.btn-success.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right:hover {
    color: #ffff00; /* Change the text color to a bright yellow */
    background: linear-gradient(145deg, #228b22, #006400); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffff00; /* Change the border color to match the bright yellow text */
}
button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right {
    color: #ffffff !important;
    background: linear-gradient(145deg, #ff6347, #c50000); /* Gradient from a lighter red to a darker red */
    border: 2px solid #8b0000; /* Darker red border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

button.btn.btn-danger.btn-flat.m-6.btn-xs.m-5.btn-modal.pull-right:hover {
    color: #ffcc00; /* Change the text color to a gold shade */
    background: linear-gradient(145deg, #c50000, #8b0000); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffcc00; /* Change the border color to match the gold text */
}
a.btn.btn-info.btn-flat.m-6.btn-xs.m-5.pull-right {
    color: #ffffff !important;
    background: linear-gradient(145deg, #00bfff, #1e90ff); /* Gradient from a lighter sky blue to a darker blue */
    border: 2px solid #007acc; /* Darker blue border for a 3D effect */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.1); /* Light and dark shadows for a 3D look */
    transition: all 0.3s ease-in-out;
}

a.btn.btn-info.btn-flat.m-6.btn-xs.m-5.pull-right:hover {
    color: #ffff66; /* Change the text color to a soft yellow */
    background: linear-gradient(145deg, #1e90ff, #007acc); /* Invert the gradient direction */
    transform: translateY(-5px) scale(1.05); /* Lift the button and slightly increase its size */
    box-shadow: 6px 6px 15px rgba(0, 0, 0, 0.5), -6px -6px 15px rgba(255, 255, 255, 0.15); /* Enhance the 3D shadow effect */
    border-color: #ffff66; /* Change the border color to match the soft yellow text */
}
i.fa.fa-pause-circle.fa-lg {
    color: #ffffff

}

i.fa.fa-window-maximize.fa-lg {
    color: #ffffff;
}

i.fas.fa-undo.fa-lg {
    color: #ffffff;
}




i.fa.fa-window-close.fa-lg {
    color: #073763;
}

i.fa.fa-backward.fa-lg {
    color: #ffffff;
}

/*end pos header style */

@media (max-width: 768px) {
    button.btn {
        width: 70px;
        height: 35px;
    }
}

@media (max-width: 576px) {
    button.btn {
        width: 60px;
        height: 36px;
    }
}

.action_button_list button{
    height: 40px !important;
    padding: 0 10px !important;
}


@media (max-width: 400px) {
    button.btn {
        width: auto !important;
        height: 30px;
        padding: 0 4px !important;
        margin: 0px 1px !important;
    }
    button.btn.btn-prni.btn-default_ff {
        width: 110px !important;
    }


    a.btn.btn-success.btn-flat.m-6.btn-xs.pull-right {
        padding: 0 4px !important;
        width: 30px !important;
        height: 30px !important;
        font-size: 12px;
        line-height: 1.5;
    }
    a.btn.btn-success.btn-flat.m-6.btn-xs.pull-right strong {
        vertical-align: sub;
    }
    a.btn.btn-success.btn-flat.m-6.btn-xs.pull-right strong i {
        vertical-align: sub;
    }

    a.btn.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-success {
        margin: 0;
    }

}

div p span {
    color: #ffffff !important;
}

div.col-md-5.no-padding.pr-12 {
    background-color: #fafafa !important;
}
div.col-md-8 {
    width: 850px!important;
}
div.pos_items_category_center.theme__pos {
    background-color: #fafafa !important;
}

div.row.theme__pos {
    background-color: #001f3f !important;
    color: #ffffff !important;

}

div.image-container.img {
    border-style: none !important;
}

div.pos_product_list.no-print {
    border-style: none !important;
}

small.text.text-muted {
    color: #050f2b !important;
}

img.img-tumbnail {
    /* Your styles for img-thumbnail go here */
}
button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal {
    background-color: #cfd8dc !important;
}
button.btn.btn-danger.btn-flat.pull-left.m-8.btn-sm.mt-10.btn-modal {
    background-color: #cfd8dc !important;
}

div.box-body {
    background-color: #fafafa !important;
    color: #000000 !important;
}

section.content.no-print {
    background-color: #fafafa !important;
}

div.dataTables_scrollFoot {
    background-color: #fafafa !important;
}

tfoot tr td {
    background-color: #fafafa !important;
    color: #000000 !important;
}

div.dataTables_scrollHead {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-block.btn-primary {
    background-color: #37474f !important;
}

tbody tr td {
    background-color: #fafafa !important;
    color: #000000 !important;
}

div.box.box-primary {
    border-style: none !important;
    background-color: #fafafa !important;
}

footer.main-footer.no-print {
    background-color: #fafafa !important;
    color: #000000 !important;
}

ul li a {
    color: #37474f !important;
    background-color: #fafafa !important;
}
button.btn.btn-info.dropdown-toggle.btn-xs {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-default.buttons-csv.buttons-html5.btn-sm {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-default.buttons-excel.buttons-html5.btn-sm {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-default.buttons-print.btn-sm {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-default.buttons-collection.buttons-colvis.btn-sm {
    background-color: #fafafa !important;
    color: #000000 !important;
}

a.btn.btn-default.buttons-pdf.buttons-html5.btn-sm {
    background-color: #fafafa !important;
}
ul li a {
    background-color: #fafafa !important;
    color: #000000 !important;
}

div h3 a {
    background-color: #fafafa !important;
    color: #37474f !important;
}

div.tab-content {
    background-color: #fafafa !important;
}

div.tab-pane.active {
    background-color: #fafafa !important;
}



tr td div {
    background-color: #fafafa !important;
    color: #000000 !important;
}

input.btn.btn-xs.btn-danger {
    height: 30px  !important;
}

input.btn.btn-xs.btn-warning {
    height: 30px !important;
}


a.btn.btn-primary.pull-right {
    background-color: #ece8ee !important;
}

a.btn.btn-success.pull-right.margin-left-10 {
    background-color: #ece8ee !important;
}



button.btn.btn-success.btn-xs.toggle-font-size {
    background-color: #fafafa !important;
    color: #000000 !important;
}
div.col-md-3.col-sm-6.col-xs-12.col-custom {
    background-color: #fafafa !important;
}

span.info-box-text {
    color: #000000 !important;
}

span.info-box-number.total_sell {
    color: #455a64 !important;
}

span.info-box-number.net {
    color: #546e7a !important;
}

span.info-box-number.invoice_due {
    color: #546e7a !important;
}

span.info-box-number.total_purchase {
    color: #546e7a !important;
}

span.info-box-number.purchase_due {
    color: #546e7a !important;
}

span.info-box-number.total_expense {
    color: #546e7a !important;
}

span.info-box-number.total_sell_return {
    color: #546e7a !important;
}

span.info-box-number.total_purchase_return {
    color: #455a64 !important;
}

div.info-box.info-box-new-style {
    border-style: solid !important;
    border-color: #eceff1 !important;
}
span.info-box-icon.bg-aqua {
    background-color: #fafafa !important;
    color: #37474f !important;
}

span.info-box-icon.bg-green {
    color: #455a64 !important;
    background-color: #fafafa !important;
}

span.info-box-icon.bg-yellow {
    background-color: #fafafa !important;
    color: #455a64 !important;
}

span.info-box-icon.bg-red {
    background-color: #fafafa !important;
    color: #455a64 !important;
}
p.mb-0.text-muted.fs-10.mt-5 {
    font-size: 0 !important;
    display: none !important;
}
i.fa.fa-exclamation-triangle.text-yellow {
    background-color: #fafafa !important;
    color: #455a64 !important;
}

i.fas.fa-list-alt.text-yellow.fa-lg {
    color: #455a64 !important;
}

div.box.box-warning {
    border-color: #fafafa !important;
    color: #000000 !important;
}

div.box-body {
    background-color: #fafafa !important;
}

i.fa.fas.fa-tachometer-alt,
i.fa.fas.fa-users-cog,
i.fa.fas.fa-users,
i.fa.fas.fa-address-book,
i.fa.fas.fa-cubes,
i.fa.fas.fa-arrow-circle-down,
i.fa.fas.fa-arrow-circle-up,
i.fa.fas.fa-truck,
i.fa.fas.fa-database,
i.fa.fas.fa-minus-circle,
i.fa.fas.fa-money-check-alt,
i.fa.fas.fa-chart-bar,
i.fa.fas.fa-hdd,
i.fa.fas.fa-plug,
i.fa.fas.fa-envelope,
i.fa.fas.fa-cog {
    color: #1565c0 !important;
}
i.fa.fas.fa-user,
i.fa.fas.fa-briefcase,
i.fa.fas.fa-handshake,
i.fa.fas.fa-star,
i.fa.fas.fa-download,
i.fa.fas.fa-list,
i.fa.fas.fa-plus-circle,
i.fa.fas.fa-circle,
i.fa.fas.fa-barcode,
i.fa.fas.fa-balance-scale,
i.fa.fas.fa-tags,
i.fa.fas.fa-gem,
i.fa.fas.fa-shield-alt,
i.fa.fas.fa-undo,
i.fa.fas.fa-pen-square,
i.fa.fas.fa-percent,
i.fa.fas.fa-file-import,
i.fa.fas.fa-book,
i.fa.fas.fa-file-alt,
i.fa.fas.fa-exchange-alt,
i.fa.fas.fa-file-invoice-dollar,
i.fa.fas.fa-hourglass-half,
i.fa.fas.fa-sliders-h,
i.fa.fas.fa-chart-line,
i.fa.fas.fa-tasks,
i.fa.fas.fa-search-dollar,
i.fa.fas.fa-search-minus,
i.fa.fas.fa-user-secret,
i.fa.fas.fa-cogs,
i.fa.fas.fa-map-marker,
i.fa.fas.fa-file,
i.fa.fas.fa-share-alt,
i.fa.fas.fa-bolt,
i.fa.fas.fa-sync {
    color: #1565c0 !important;
}
button.btn.btn-danger.btn-big {
    background-color: #455a64 !important;
}

div.inner {
    background-color: #b0bec5 !important;
    border-style: none !important;
}

a.small-box-footer {
    background-color: #37474f !important;
}

i.ion.ion-pie-graph {
    color: #fafafa !important;
}

i.ion.ion-person-add {
    color: #fafafa !important;
}

label.btn.btn-info.active {
    color: #fafafa !important;
    background-color: #607d8b !important;
}

ul.treeview-menu.menu-open {
    padding-left: 10px !important;
    border-style: none !important;
    border-left-width: 0px !important;
}
tbody tr th {
    background-color: #78909c !important;
}

thead tr th {
    background-color: #fafafa !important;
}
tbody tr th {
    background-color: #fafafa !important;

}

span.text-white {
    color: #000000 !important;
}

div div a {
    color: #000000 !important;
}

p.form-header.text-white {
    color: #121111 !important;
}
i.fas.fa-cogs {
    color: #000000!important

}

div.content.clearfix {
    background-color: #fafafa !important;
}

div fieldset legend {
    color: #000000 !important;
}

div div label {
    color: #000000 !important;
}
div.inner {
    background-color: #eceff1 !important;
    color: #000000 !important;
}

div div h3 {
    color: #000000 !important;
}

i.ion.ion-person-add {
    color: #0d47a1 !important;
}

i.ion.ion-pie-graph {
    color: #0d47a1 !important;
}

a.small-box-footer {
    background-color: #cfd8dc !important;
}


a.btn.btn-primary.mt-5 {
    background-color: #eceff1 !important;
}
a.btn.btn-primary.mt-5 {
    background-color: #eceff1 !important;
}


input.btn.btn-danger.btn-big {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #c82333) !important; /* Gradient from bright red to a darker red */
    border: 2px solid #c82333 !important; /* Border matching the darker red shade */
    border-radius: 8px !important; /* Slightly more rounded corners for a bigger button */
    padding: 12px 20px !important; /* Larger padding for a bigger button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2), -4px -4px 10px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
    height: auto !important; /* Ensures the height is appropriate for input buttons */
    line-height: normal !important; /* Normal line height for text alignment */
}

input.btn.btn-danger.btn-big:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #c82333, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3), -5px -5px 12px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #c82333 !important; /* Keep the border color consistent */
}


a.btn.btn-primary.pull-right {
    width: 100px !important;
    height: 36px !important;

    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright blue to dark blue */
    border: 2px solid #003399 !important; /* Border matching the medium blue shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 8px 16px !important; /* Standard padding for a medium-sized button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    float: right !important; /* Align button to the right */
    margin-left: 8px; /* Add spacing on the left if needed */
    cursor: pointer; /* Change cursor to pointer */
}

a.btn.btn-primary.pull-right:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #001a66, #0044cc) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #003399 !important; /* Keep the border color consistent */
}

a.btn.btn-success.pull-right.margin-left-10 {
    height: 36px !important;
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #28a745, #1e7e34) !important; /* Gradient from bright green to darker green */
    border: 2px solid #1e7e34 !important; /* Border matching the darker green shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 8px 16px !important; /* Standard padding for medium-sized button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    float: right !important; /* Align button to the right */
    margin-left: 10px !important; /* Add left margin for spacing */
    cursor: pointer; /* Change cursor to pointer */
}

a.btn.btn-success.pull-right.margin-left-10:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #1e7e34, #28a745) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #1e7e34 !important; /* Keep the border color consistent */
}


label.btn.btn-info {
    margin-left: 5px !important;
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Gradient from bright teal to a darker blue */
    border: 2px solid #ffffff !important; /* Border matching the darker shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 8px 16px !important; /* Standard padding for a medium-sized button */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure button-like appearance */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

label.btn.btn-info:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0044cc, #001a66) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slightly lift and enlarge the label on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #ffffff !important; /* Keep the border color consistent */
}

label.btn.btn-info:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5) !important; /* Add a teal glow for focus state */
}

a.list-group-item.text-center.active {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #007bff, #0056b3) !important; /* Gradient from bright blue to darker blue */
    border: 2px solid #0056b3 !important; /* Border matching the darker blue shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 10px 20px !important; /* Adequate padding for a prominent appearance */
    text-decoration: none !important; /* Remove underline */
    display: block !important; /* Ensure full-width block display */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2), -3px -3px 8px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover and active effects */
    cursor: pointer; /* Change cursor to pointer */
    text-align: center !important; /* Center align the text */
}

a.list-group-item.text-center.active:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #0056b3, #007bff) !important; /* Invert the gradient direction on hover */
    transform: translateY(-4px) scale(1.05) !important; /* Slightly lift and enlarge the item on hover */
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #0056b3 !important; /* Keep the border color consistent */
}

a.list-group-item.text-center.active:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5) !important; /* Add a blue glow for focus state */
}


button.btn.btn-xs.btn-danger.delete_unit_button {
    height: 40px!important;
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #c82333) !important; /* Gradient from bright red to darker red */
    border: 2px solid #c82333 !important; /* Border matching the darker red shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding suitable for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-xs.btn-danger.delete_unit_button:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #c82333, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #c82333 !important; /* Keep the border color consistent */
}

button.btn.btn-xs.btn-danger.delete_unit_button:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5) !important; /* Add a red glow for focus state */
}


button.btn.btn-xs.btn-danger.delete_category_button {
    height: 40px!important;
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #c82333) !important; /* Gradient from bright red to darker red */
    border: 2px solid #c82333 !important; /* Border matching the darker red shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding suitable for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

button.btn.btn-xs.btn-danger.delete_category_button:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #c82333, #dc3545) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #c82333 !important; /* Keep the border color consistent */
}

button.btn.btn-xs.btn-danger.delete_category_button:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5) !important; /* Add a red glow for focus state */
}

a.btn.btn-xs.btn-success {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #28a745, #1e7e34) !important; /* Gradient from bright green to darker green */
    border: 2px solid #1e7e34 !important; /* Border matching the darker green shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding suitable for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

a.btn.btn-xs.btn-success:hover {
    color: #ffffff !important; /* Keep text color white on hover */
    background: linear-gradient(145deg, #1e7e34, #28a745) !important; /* Invert the gradient direction on hover */
    transform: translateY(-2px) scale(1.03) !important; /* Slightly lift and enlarge the button on hover */
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important; /* Enhance the 3D shadow effect on hover */
    border-color: #1e7e34 !important; /* Keep the border color consistent */
}

a.btn.btn-xs.btn-success:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.5) !important; /* Add a green glow for focus state */
}

a.btn.btn-xs.btn-danger.link_confirmation {
    color: #ffffff !important; /* White text color */
    background: linear-gradient(145deg, #dc3545, #c82333) !important; /* Gradient from bright red to darker red */
    border: 2px solid #c82333 !important; /* Border matching the darker red shade */
    border-radius: 6px !important; /* Slightly rounded corners */
    padding: 4px 8px !important; /* Smaller padding suitable for extra small button size */
    text-decoration: none !important; /* Remove underline */
    display: inline-block !important; /* Ensure proper button-like display */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2), -2px -2px 5px rgba(255, 255, 255, 0.1) !important; /* Subtle 3D shadow effect */
    transition: all 0.3s ease-in-out !important; /* Smooth transition for hover effects */
    cursor: pointer; /* Change cursor to pointer */
}

a.btn.btn-xs.btn-danger.link_confirmation:hover {
    color: #ffffff !important;
    /*Keeptextcolorwhiteonhover*/background: linear-gradient(145deg, #c82333, #dc3545) !important;
    /*Invertthegradientdirectiononhover*/transform: translateY(-2px) scale(1.03) !important;
    /*Slightlyliftandenlargethebuttononhover*/box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3), -3px -3px 8px rgba(255, 255, 255, 0.15) !important;
    /*Enhancethe3Dshadoweffectonhover*/border-color: #c82333 !important;
    /* Keep the border color consistent */:;
    -webkit-transform: translateY(-2px) scale(1.03) !important;
    -moz-transform: translateY(-2px) scale(1.03) !important;
    -ms-transform: translateY(-2px) scale(1.03) !important;
    -o-transform: translateY(-2px) scale(1.03) !important;
}

a.btn.btn-xs.btn-danger.link_confirmation:focus {
    outline: none !important; /* Remove default focus outline */
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5) !important; /* Add a red glow for focus state */
}

i.fa.fa-calculator.fa-lg {
    color: #ffffff !important;

}

i.fa.fa-briefcase.fa-lg {
    color: #ffffff!important;
}
/* END JCN */

.btn-pos{
    padding: 6px 5px !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

.fs-12{
    font-size: 10px !important;
}