/* Declare global CSS variables for easy theming */
:root {
    --accent-color: #B10202; /* Primary red for backgrounds and active dots */
    --accent-border-color: #d10404; /* Darker red used for the active dot border */
    --border-light: #f4f5fb; /* Color for the light border around the toggle button */

    --btn-primary-bg: #1E7D4E; /* background color for primary buttons */
    --btn-secondary-bg: #1B63A3; /* background color for secondary buttons */
    --btn-danger-bg: #CC0202; /* background color for secondary buttons */
}

/*remove color-profile before selected menu item*/
.menu-inner > .menu-item.active::before {
    content: none !important;
}

/*selected menu*/
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link, .bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-sub > .menu-item.active:not(:has(.menu-sub)) > .menu-link {
    color: #fff !important;
    background-color: var(--accent-color) !important;
}

/*selected sub menu dot*/
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
    background-color: var(--accent-color) !important;
    border: 2px solid var(--accent-border-color) !important;
}

/*menu toggle button*/
.app-brand .layout-menu-toggle {
    background-color: var(--accent-color);
    border: 7px solid var(--border-light);
}

/*template customizer open button*/
#template-customizer .template-customizer-open-btn {
    background: var(--accent-color);
}


/*----------  Button ---------------   */
.btn:hover {
    transform: translateY(-1px);
}

/*----------  Primary Button ---------------   */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    box-shadow: 0 0.125rem 0.25rem 0 rgba(30, 125, 78, 0.5);
}
.btn-group .btn-primary, .input-group .btn-primary {
    border-right: var(--bs-border-width) solid var(--btn-primary-bg);
    border-left: var(--bs-border-width) solid var(--btn-primary-bg);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
}

/*----------  Secondary Button ---------------   */
.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-bg);
    box-shadow: 0 0.125rem 0.25rem 0 rgba(27, 99, 163, 0.5);
}

.btn-group .btn-secondary, .input-group .btn-secondary {
    border-right: var(--bs-border-width) solid var(--btn-secondary-bg);
    border-left: var(--bs-border-width) solid var(--btn-secondary-bg);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
}

/*----------  Danger Button ---------------   */
.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    box-shadow: 0 0.125rem 0.25rem 0 rgba(204, 2, 2, 0.5);
}

.btn-group .btn-danger, .input-group .btn-danger {
    border-right: var(--bs-border-width) solid var(--btn-danger-bg);
    border-left: var(--bs-border-width) solid var(--btn-danger-bg);
}

.btn-danger:hover, .btn-danger:active, .btn-danger:focus {
    background-color: var(--btn-danger-bg) !important;
    border-color: var(--btn-danger-bg) !important;
}