InvestmentPanel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background-color: #070a0c;
  color: white;

  p,
  h1 {
    margin: 0;
    padding: 0;
  }

  header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgb(39 42 46 / 0.7);
    // box-shadow

    .container-title {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      // box-shadow

      .title {
        font-family: "JetBrains Mono";
        color: #00ff66;
        font-weight: bold;
        font-size: 16px;
      }
    }

    .content {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid rgb(39 42 46 / 0.8);
      gap: 10px;
      border-radius: 5px;
      padding: 5px;
      // box-shadow
      pointer-events: all;
      transition: all 500ms ease;

      &:hover {
        background-color: rgb(19 23 26 / 0.95);
        transition: all 500ms ease;
      }

      p {
        font-family: "JetBrains Mono";
        color: #00ff66;
      }
    }
  }

  .container {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    max-width: 90%;
    width: 100%;
    margin: 0 auto;
    margin-top: 15px;
    font-family: "Space Grotesk";

    .card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-height: 200px;
      background-color: rgb(19, 23, 26, 0.95);
      border: 1px solid rgba(39, 42, 46, 0.8);
      border-radius: 8px;
      padding: 15px;
      overflow: hidden;
      pointer-events: all;
      box-shadow:
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0) 0px 0px 0px 0px,
        rgba(0, 0, 0, 0.6) 0px 8px 24px 0px;
      transition: all 300ms ease;

      &:hover {
        transition: all 300ms ease;
      }

      .card-header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .card-header-wrapper {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          gap: 10px;

          .card-title {
            font-weight: bold;
            color: #b9ccb5;
          }
        }

        .tag {
          font-family: "JetBrains Mono";
          color: green;
          background-color: #00ff66;
          font-size: 14px;
          padding: 2px 7px;
          font-weight: 800;
        }

        .standard {
          background-color: #363636;
          color: gray;
        }

        .low {
          background-color: #641818;
          color: #c54444;
        }
      }

      .card-body {
        display: flex;
        flex: 1;
        padding-top: 10px;

        .investment-container {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 100%;
          height: 100%;

          .investment-content {
            display: flex;
            justify-content: space-between;

            .shares {
              font-size: 16px;
              color: #b8b7b7;
              font-family: "JetBrains Mono";
            }
          }
        }

        .investment-text {
          font-size: 40px;
          font-weight: bold;
        }
      }
    }
  }

  .image {
    object-fit: cover;
  }

  .text {
    font-size: 14px;
  }

  .good {
    color: #00ff66;
  }

  .normal {
    color: gray;
  }

  .bad {
    color: #b40c0c;
  }

  .action {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;

    .btn {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 14px 16px;
      border: 1px solid transparent;
      font-size: 20px;
      border-radius: 4px;
      font-family: "JetBrains Mono";

      text-transform: uppercase;

      transition: all 300ms ease;

      &:hover {
        transition: all 300ms ease;
        sound-in: ui.button.over;
      }

      &:active {
        sound-in: hz_ui_click_button_tiny_01;
      }
    }

    .btn-primary {
      background-color: #00ff66;
      color: #007128;
      box-shadow:
        #000 0 0 0 0,
        #000 0 0 0 0,
        rgba(0, 255, 102, 0.61) 0 0 29.1793px 0;

      &:hover {
        background-color: #2cf509;
        box-shadow:
          #000 0 0 0 0,
          #000 0 0 0 0,
          rgba(4, 219, 90, 0.61) 0 0 29.1793px 0;
      }
    }

    .btn-secondary {
      background-color: #00e3fd;
      color: #0b0f12;

      &:hover {
        background-color: #04c6db;
      }
    }
  }
}