:root {
    --primary_color1: #0073ff;
    --primary_color2: #fa0303;
    --primary_color3: #4dff00;
    --primary_color4: #f7fb00;
    --primary_color_ERP: #7456AE;
    --primary_color_ERP2: #7b0089;
    --primary_color_disabled: #C1BBBB;
    --primary_color_disabled2: #FAEBD7;
    --primary_color_ERP_White: #f6f6f6;
    --primary_color_ERP_Black: #000000
}

.background_primary_color {
    background-color:var(--primary_color_ERP);
    color:white;
}
    .background_primary_color:hover {
        background-color: var(--primary_color_ERP);
        color: white;
    }
.background_disabled_color {
    background-color: var(--primary_color_disabled);
    color: var(--primary_color_ERP);
}
.background_disabled_color2 {
    background-color: var(--primary_color_disabled2);
    color: var(--primary_color_ERP2);
}

.text_primary_color {
    color: var(--primary_color_ERP);
}


/* Initial state */
.background_border_color {
    border: 2px solid var(--primary_color_ERP); /* Border on all sides */
    color: var(--primary_color_ERP); /* Text color same as border */
    background-color: transparent; /* No background color */
    transition: all 0.3s ease; /* Smooth transition for hover effect */
}
    .background_border_color:hover {
        border-color: var(--hover_color); /* Change border color on hover */
        background-color: var(--primary_color_ERP);
        color: white /* Change text color on hover */
    }

/*
 * Skin: ERP
 * ----------
 */
.skin-erp .main-header .navbar {
    background-color: var(--primary_color_ERP);
}

    .skin-erp .main-header .navbar .nav > li > a {
        color: white 
    }

        .skin-erp .main-header .navbar .nav > li > a:hover,
        .skin-erp .main-header .navbar .nav > li > a:active,
        .skin-erp .main-header .navbar .nav > li > a:focus,
        .skin-erp .main-header .navbar .nav .open > a,
        .skin-erp .main-header .navbar .nav .open > a:hover,
        .skin-erp .main-header .navbar .nav .open > a:focus {
            background: var(--primary_color_ERP);
            color: white;
        }

    .skin-erp .main-header .navbar .navbar-custom-menu > .nav {
        margin-right: 10px;
    }

    .skin-erp .main-header .navbar .sidebar-toggle {
        color: #ffffff;
    }

        .skin-erp .main-header .navbar .sidebar-toggle:hover {
            color: #f6f6f6;
            background: var(--primary_color_ERP);
        }

    .skin-erp .main-header .navbar .sidebar-toggle {
        color: #fff;
    }

        .skin-erp .main-header .navbar .sidebar-toggle:hover {
            background-color: var(--primary_color1);
        }

@media (max-width: 767px) {
    .skin-erp .main-header .navbar .dropdown-menu li.divider {
        background-color: var(--primary_color_ERP);
    }

    .skin-erp .main-header .navbar .dropdown-menu li a {
        color: #fff;
    }

        .skin-erp .main-header .navbar .dropdown-menu li a:hover {
            background: var(--primary_color_ERP2);
        }
}

.skin-erp .main-header .logo {
    background-color: var(--primary_color_ERP);
    color: #ffffff;
    border-bottom: 0px solid transparent;
}

    .skin-erp .main-header .logo > a {
        color: var(--primary_color_ERP);
    }

    .skin-erp .main-header .logo:hover {
        background: var(--primary_color_ERP);
    }

.skin-erp .main-header li.user-header {
    background-color: var(--primary_color_ERP);
}

.skin-erp .content-header {
    background: transparent;
}

.skin-erp .user-panel > .info,
.skin-erp .user-panel > .info > a {
    color: #fff;
}

.skin-erp .sidebar-menu > li.header {
    color: var(--primary_color_ERP_Black);
    background: var(--primary_color_ERP_White);
}

.skin-erp .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    margin-right: 1px;
}

    .skin-erp .sidebar-menu > li > a:hover,
    .skin-erp .sidebar-menu > li.active > a {
        color: var(--primary_color_ERP);
        background: var(--primary_color_ERP_White);
        border-left-color: var(--primary_color_ERP2);
    }

.skin-erp .sidebar-menu > li > .treeview-menu {
    margin: 0 1px;
    color: var(--primary_color_ERP_Black);
    background: var(--primary_color_ERP_White);
}

.skin-erp .wrapper,
.skin-erp .main-sidebar,
.skin-erp .left-side {
    background: var(--primary_color_ERP_White);
}

.skin-erp .sidebar a {
    color: var(--primary_color_ERP_Black);
}

    .skin-erp .sidebar a:hover {
        text-decoration: none;
    }

.skin-erp .treeview-menu > li > a {
    color: var(--primary_color_ERP_Black);
}

    .skin-erp .treeview-menu > li.active > a,
    .skin-erp .treeview-menu > li > a:hover {
        color: var(--primary_color_ERP);
    }

.skin-erp .sidebar-form {
    border-radius: 2px;
    border: 1px solid var(--primary_color_ERP2);
    margin: 10px 10px -5px 10px;
}

    .skin-erp .sidebar-form input[type="text"],
    .skin-erp .sidebar-form .btn {
        box-shadow: none;
        background-color: var(--primary_color_ERP_White);
        border: 1px solid transparent;
        height: 30px;
        -webkit-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
        -o-transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
        transition: all 0.3s cubic-bezier(0.32, 1.25, 0.375, 1.15);
    }

    .skin-erp .sidebar-form input[type="text"] {
        color: #666;
        border-top-left-radius: 2px !important;
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        border-bottom-left-radius: 2px !important;
    }

        .skin-erp .sidebar-form input[type="text"]:focus,
        .skin-erp .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
            background-color: #fff;
            color: #666;
        }

            .skin-erp .sidebar-form input[type="text"]:focus + .input-group-btn .btn {
                border-left-color: #fff;
            }

    .skin-erp .sidebar-form .btn {
        color: #999;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 2px !important;
        border-bottom-right-radius: 2px !important;
        border-bottom-left-radius: 0 !important;
    }

.skin-erp.layout-top-nav .main-header > .logo {
    background-color: #3c8dbc;
    color: #ffffff;
    border-bottom: 0px solid transparent;
}

    .skin-erp.layout-top-nav .main-header > .logo > a {
        color: #ffffff;
    }

    .skin-erp.layout-top-nav .main-header > .logo:hover {
        background: #3b8ab8;
    }
/*ACCOUNTS SECTION COLOR*/
.coa select:disabled {
    background-color: var(--primary_color_disabled2); /* Light gray background */
}

.coa input:disabled {
    background-color: var(--primary_color_disabled2); /* Light gray background */
}

.coa textarea:disabled {
    background-color: var(--primary_color_disabled2); /* Light gray background */
}

.coa checkbox:disabled {
    background-color: var(--primary_color_disabled2); /* Light gray background */
}
/*ACCOUNTS SECTION COLOR*/