.diagram-container {
            position: relative;
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: 250px;
            margin: 40px auto; /* Center the container */
            width: fit-content; /* Adjust width to content */
        }

        .circle-container {
            position: relative;
            z-index: 2;
        }

        .circle-link {
            width: 100px;
            height: 100px;
            background-color: #007bff;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: white;
            transition: background-color 0.3s;
        }

            .circle-link:hover {
                background-color: #0056b3;
                color: white;
                text-decoration: none;
            }

        .square-link {
            width: 100px;
            height: 100px;
            background-color: #28a745;
            display: flex;
            justify-content: center;
            align-items: center;
            text-decoration: none;
            color: white;
            transition: background-color 0.3s;
            margin-bottom: 50px;
            position: relative;
            z-index: 2;
        }

            .square-link:hover {
                background-color: #218838;
                color: white;
                text-decoration: none;
            }

        .connecting-line {
            position: relative;
            background-color: #6c757d;
            z-index: 1;
        }

        .line-top {
            margin-top: -50px; /* From top of circle to square above */
            width: 8px;
            height: 50px;
            transform: translateX(-50%);
        }

        .line-bottom {
            top: 10 px; /* From bottom of circle to square below */
            width: 8px;
            height: 50px;
            transform: translateX(-50%);
        }

        .line-right {
            top: -20px;
            transform: translateY(-50%);
            width: 50px;
            height: 8px;
        }

        .line-diagonal {
            top: 50px; /* Ylläpito-laatikon yläreunan taso */
            left: -170px; /* Ensimmäisen sarakkeen oikea reuna */
            width: 90px; /* Viivan pituus */
            height: 8px;
            background-color: #6c757d;
            z-index: 1;
            transform: rotate(135deg);
        }