.cursor-data {
    cursor: pointer;
  }

  .button-area {
    display: none;
  }

  @media screen and (max-width: 768px) {
    .button-area {
      display: block;
    }
  }

  .spinner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 40px;
    width: 56px
  }

  .spinner>div {
    width: 12px;
    height: 12px;
    background-color: #1E96F7;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: fuse-bouncedelay 1s infinite ease-in-out both;
    animation: fuse-bouncedelay 1s infinite ease-in-out both
  }

  fuse-splash-screen .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s
  }

  fuse-splash-screen .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s
  }

  @-webkit-keyframes fuse-bouncedelay {

    0%,
    80%,
    100% {
      -webkit-transform: scale(0)
    }

    40% {
      -webkit-transform: scale(1.0)
    }
  }

  @keyframes fuse-bouncedelay {

    0%,
    80%,
    100% {
      -webkit-transform: scale(0);
      transform: scale(0)
    }

    40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0)
    }
  }


    .tool {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
            padding: 15px;
            width: 100%;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .tool:hover {
            transform: scale(1.05);
        }

        .tool img {
            width: 50px;
            height: 50px;
            margin-right: 20px;
        }

        .tool div {
            flex-grow: 1;
        }

        .status {
            font-weight: bold;
        }

        .status.online {
            color: #4CAF50;
        }

        .status.offline {
            color: #FF6347;
        }

        /* Responsividade */
        @media (max-width: 768px) {
            .tool {
                flex-direction: column;
                text-align: center;
            }

            .tool div {
                margin-top: 10px;
            }
        }

        #chartContainer {
            width: 100%;
            max-width: 600px;
            height: 400px;
            margin-top: 30px;
            background-color: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        }

        .spinnerdata {
            border: 4px solid rgba(0, 0, 0, 0.1);
            border-left: 4px solid #6200ea;
            border-radius: 50%;
            width: 34px;
            height: 34px;
            animation: spin 1s linear infinite;
            display: inline-block;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }