:root {
    --primary-color: 236, 72, 153; /* Pink */
    --secondary-color: 54,48,163; /* Pink */
    --primary-text-color: 236, 72, 153; /* Pink */
    --secondary-text-color: 54,48,163; /* Pink */    
    --bg-color: 255, 255, 255; /* White */
    --text-color: 30, 41, 59; /* Slate-800 */
    --err-bgcolor: 254, 242, 242;    
    --errtext-color: 220, 38, 38;
}

/* Color Classes */
.bg-primary { background-color: rgb(var(--primary-color)); }
.text-primary { color: rgb(var(--primary-text-color)); }
.text-secondary { color: rgb(var(--secondary-text-color)); }
.bg-secondary { background-color: rgb(var(--secondary-color)); }
.text-secondary { color: rgb(var(--secondary-color)); }
.bg-background { background-color: rgb(var(--bg-color)); }
.text-background { color: rgb(var(--text-color)); }
.text-err { color: rgb(var(--errtext-color)); }
.bg-err { background-color: rgb(var(--err-bgcolor)); }
.text-grey{color:rgb(107 114 128 / var(--tw-text-opacity, 1))}

/* ✅ Fixed Button Hover */
.button {
    background-color: rgba(var(--primary-color),.85);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: rgba(var(--primary-color), 1); /* Fixed hardcoded value */
}

/* ✅ Fixed Logo */
.logologin {
    background-image: url('/static/img/insient-logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;

}
.logotop {
    background-image: url('/static/img/insient-logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: auto;
    position: absolute;
    width:120px;
    height:40px;
    left:18px;
    top:10px;
}

.txtlogo {
    font-family: "Audiowide";
    color: rgb(var(--secondary-text-color));
}

.inactive
{
    color: rgb(55 65 81 / var(--tw-text-opacity, 1));
    background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1))
}
.sidebar-hover {
    transition: color 0.3s ease, border-left 0.3s ease;
}

/* Hover effect for link and SVG */
.sidebar-hover:hover {
    color: rgb(var(--primary-color)); /* Change text color */
    border-left: 1px solid rgb(var(--primary-color)); /* Adjust border */
    background-color: rgba(var(--primary-color), 0.1); /* Use var() with opacity */
}


/* Ensure the SVG icon color changes on hover */
.sidebar-hover:hover svg path {
    fill: rgb(var(--primary-color)); /* Change SVG color */
}

.border-primary {border:1px solid rgb(var(--primary-color))}

.border-secondary{border:1px solid rgb(var(--secondary-color))}