@font-face {
	    font-family: 'Poppins';
	    src: url('/fonts/Poppins-Regular.woff') format('woff');
	    font-weight: 400;
	    font-style: normal;
	}

	@font-face {
	    font-family: 'Poppins';
	    src: url('/fonts/Poppins-SemiBold.woff') format('woff');
   	    font-weight: 600;
	    font-style: normal;
	}

        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f0f4f8;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            margin: 0;
            margin-top: 60px;
            padding: 20px;
            overflow-y: auto;
        }

        .server-selection {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            flex-wrap: wrap; /* Permette il wrap dei riquadri su schermi più piccoli */
            justify-content: center; /* Centra i riquadri quando il wrap è attivo */
        }

        .server-info {
	    display: flex;
	    align-items: center;
	    justify-content: flex-start;
	    background-color: #fff;
	    border-radius: 15px;
	    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
	    padding: 20px;
	    text-align: left;
	    height: 200px;
	    width: 500px;
	    position: relative;
	    margin-bottom: 20px;
	    cursor: pointer;
	    transition: transform 0.3s ease-in-out; /* Effetto hover */
	    border-bottom: 2px solid transparent; /* Bordo inferiore inizialmente invisibile */
	}
	
	.server-info.selected {
	    border-bottom: 4px solid gray; /* Linea grigia sotto il riquadro selezionato */
	}


        .server-info:hover {
            transform: scale(1.05); /* Aumenta la dimensione del riquadro al passaggio del mouse */
        }

        .server-info img {
            width: 180px;
            height: 180px;
            margin-right: 20px;
            border-radius: 10px;
            object-fit: contain;
        }

        .server-info .server-details {
            display: flex;
            flex-direction: column;
        }

        .server-info .server-details h3 {
            margin: 0;
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }

        .server-info .server-details p {
            margin: 5px 0;
            font-size: 14px;
            color: #777;
        }

        .server-info .quote {
            margin-top: 20px;
            font-style: italic;
            font-size: 16px;
            color: #888;
        }

        .dashboard {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1000px;
            width: 100%;
            margin-top: 20px;
        }

        .card {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            text-align: center;
            position: relative;
        }

        .card h3 {
            margin-bottom: 10px;
            font-size: 16px;
            color: #666;
            font-weight: 600;
        }

        .card .value {
            font-size: 50px;
            margin-bottom: 10px;
            font-weight: 600;
            color: #333;
        }

        .card .details {
            font-size: 14px;
            color: #999;
        }

        .card .icon {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 40px;
            height: 40px;
            background-color: #f2f2f2;
            border-radius: 10px;
        }

        #cpu-card .icon {
            background-image: url('placeholder_cpu.png');
            background-size: cover;
        }

        #memory-card .icon {
            background-image: url('placeholder_ram.png');
            background-size: cover;
        }

        #storage-card .icon {
            background-image: url('placeholder_disk.png');
            background-size: cover;
        }

        .uptime {
            grid-column: span 3;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background-color: #ffffff;
            color: #333;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            font-size: 16px;
            margin-top: 30px;
        }

        .cpu-stripe,
        .ram-stripe,
        .disk-stripe {
            width: 100%;
            height: 5%;
            border-radius: 5px 5px 0 0;
        }

        .cpu-stripe {
            background-color: red;
        }

        .ram-stripe {
            background-color: blue;
        }

        .disk-stripe {
            background-color: green;
        }

        .chart-container {
            width: 100%;
            max-width: 1000px;
            margin-top: 40px;
            height: 1600px;
        }

        body::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 300px;
            background-color: #e0e7ff;
            z-index: -1;
        }

        .back-button {
            position: absolute;
            top: 20px;
            left: 20px;
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

        .back-button:hover {
            background-color: #0056b3;
        }