.btn {
    color: white;
    padding: 4px 10px;
    border-radius: 3px; /* Adding rounded corners for better appearance */
    font-weight: bold; /* Making the text bold */
    margin: 2px; /* Adding some margin for spacing between buttons */
}

.btn.inactive {
    opacity: 0.5;
    background-color: #555; /* Desaturated color */
}

.btn.active {
    opacity: 1;
}

/* Remote Code Execution (RCE) */
.btn-rce {
    background: #FF4C4C; /* A bright, eye-catching red */
}

/* Cross-Site Scripting (XSS) */
.btn-xss {
    background: #4C8AFF; /* A bright blue */
}

/* Local File Inclusion (LFI) */
.btn-lfi {
    background: #FFC300; /* A slightly dimmed yellow */
}

/* SQL Injection (SQLi) */
.btn-sqli {
    background: #FF69B4; /* A bright pink */
}

/* Server-Side Request Forgery (SSRF) */
.btn-ssrf {
    background: #20B2AA; /* A slightly dimmed turquoise */
}

/* PHP Object Injection (PHPOI) */
.btn-phpoi {
    background: #61c500; /* A slightly dimmed green */
}

/* Open Redirect */
.btn-or {
    background: #FFA07A; /* A light salmon */
}

/* Information Disclosure */
.btn-info {
    background: #87CEFA; /* A light sky blue */
}

/* CSRF */
.btn-csrf {
    background: #DAA520; /* A goldenrod */
}

/* Arbitrary File Download (AFD) */
.btn-afd {
    background: #FF7F50; /* A coral color */
}

/* Arbitrary File Write (AFW) */
.btn-afw {
    background: #8A2BE2; /* A blue violet color */
}

/* Arbitrary File Read (AFR) */
.btn-afr {
    background: #6495ED; /* A cornflower blue color */
}




.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px;
}

.flow-diagram a {
    text-decoration: none;
    color: white;
    padding: 15px 30px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    position: relative;
    margin: 10px 12px; /* Space between buttons */
    opacity: 0.5; /* Desaturate by default */
    transition: opacity 0.3s;
    text-transform: lowercase;
}

.flow-diagram a.active {
    opacity: 1; /* Full opacity for active page */
}

.flow-diagram a.sources {
    background-color: #4CAF50; /* Green */
}

.flow-diagram a.propagators {
    background-color: #2196F3; /* Blue */
}

.flow-diagram a.sinks {
    background-color: #f44336; /* Red */
}

.flow-diagram a.sanitizers {
    background-color: #DAA520; /* Yellow */
}

.flow-diagram a:last-child::after {
    content: '';
}

.flow-diagram .chevron {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.73);
}