body {
      background-color: #f7f7f7;
      font-family: Arial, sans-serif;
    }
    .container-brief {
      max-width: 1250px;
      margin: 1rem auto;
      padding: 1rem;
      background: #ffffff;
      border-radius: 8px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }
    .card {
      border: none;
      border-radius: 8px;
      padding: 1rem;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    .format-container {
      position: relative;
    }
    .format-btn {
      white-space: nowrap;
    }
    .btn-gradient {
      background: linear-gradient(90deg, #553c9a, #ee4b2b);
      color: white;
    }
   .loader-border {
    width: 1.2rem;
    height: 1.2rem;
    border-width: 0.2em;
    border-radius: 0; /* This ensures the element is a square box */
}

    ::-webkit-scrollbar {
      width: 0px;
    }
    .relative-container {
      position: relative;
    }
    .dice-details {
      position: absolute;
      right: 10px;
      top: 40%;
      transform: translateY(-50%);
      cursor: pointer;
      color: rgb(199, 46, 46);
    }
    #additionalOptionsContainer {
      display: none;
      margin-top: 1rem;
      border-top: 1px solid #ddd;
      padding-top: 1rem;
    }
    .preview-box {
      min-height: 150px;
      max-height: 300px;
      overflow-y: auto;
      transition: opacity 0.5s;
    }
    .fade-in {
      animation: fadeIn 0.5s ease-in-out;
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    .action-buttons .btn {
      min-width: 100px;
    }
    .copy-icon {
      position: absolute;
      right: 10px;
      top: 10px;
      cursor: pointer;
      color: rgb(199, 46, 46);
    }
    .step {
      background-color: #f9f9f9;
      padding: 20px;
    }
    @media screen and (max-width: 768px) {
      .step {
        padding: 15px;
        margin-bottom: 20px;
        max-width: 100%;
        overflow-x: hidden;
      }
    }
    .step-description {
      font-size: 16px;
      color: #666;
    }