body {
        font-family: Georgia, sans-serif;
        font-size: 8px;
        color: #000000;
        text-align: left;
        background-color: azure;
        background: #0b1120;
        background:
          radial-gradient(at 81% 68%, #00c9ff, transparent 70%),
          radial-gradient(at 19% 32%, #7209b7, transparent 70%), #0b1120;
        background-attachment: fixed;
      }
      input {
        padding: 0.5rem;
        margin: 0.5rem auto;
        width: 300px;
        font-size: 10px;
        color: rgb(105, 96, 96);
        border-radius: 0.5rem;
        display: block;
      }
        input.nums {
        padding: 0.5rem;
        margin: 0.5rem auto;
        width: 70px;
        font-size: 10px;
        color: rgb(105, 96, 96);
        border-radius: 0.5rem;
        display: block;
      }
       input.qrurl {
          width: 220px;
      }
      button {
        padding: 0.75rem 1.5rem;
        margin-left: 1rem;
        border-radius: 1rem;
        cursor: pointer;
      }
      button:hover {
        filter: brightness(0.9);
      }
      #qr-code {
        margin-top: 1.75rem;
      }

      /*
      * Created with https://www.css-gradient.com
      * Gradient link: https://www.css-gradient.com/?blobs=00c9ff@81,68;7209b7@19,32&base=0b1120&gt=m
      */

      /* Circular Color Picker - START */
      .circular-color-picker {
        /* Step 1: Force equal dimensions and clear default browser borders */
        width: 20px;
        height: 20px;
        padding: 0;
        border: none;
        border-radius: 50%;
        cursor: pointer;

        /* Step 2: Ensure internal rendering cuts off at the edges */
        overflow: hidden;
      }

      /* Step 3: Style the inner swatch for WebKit browsers (Chrome, Safari, Edge) */
      .circular-color-picker::-webkit-color-swatch-wrapper {
        padding: 0;
      }
      .circular-color-picker::-webkit-color-swatch {
        border: none;
        border-radius: 50%;
      }

      /* Step 4: Style the inner swatch for Firefox */
      .circular-color-picker::-moz-color-swatch {
        border: none;
        border-radius: 50%;
      }
      /* Circular Color Picker - END */

      hr {
        border: none;
        border-top: 1px solid black;
      }


/* Bootstrap  Nav bar start */
      /* Stack logo and nav vertically */
.navbar {
  display: flex;
  flex-direction: column;
  align-items: center;
        
  /*
        background-color: azure;
        background: #0b1120;
        background:
          radial-gradient(at % 68%, #00c9ff, transparent 70%),
          radial-gradient(at 19% 32%, #7209b7, transparent 70%), #0b1120;
        background-attachment: fixed;
*/
      /*  background-image: linear-gradient(180deg, #b721ff 60%, #21d4fd 100%); */

                        background-color: azure;
        background: #0b1120;
        background:
          radial-gradient(at 81% 68%, #00c9ff, transparent 70%),
          radial-gradient(at 19% 32%, #7209b7, transparent 70%), #0b1120;
        background-attachment: fixed;

      }

}

/* Optional: Style for larger screens only */
@media (min-width: 992px) {
  .navbar {
    flex-direction: column;
  }
  
  /* Add borders or spacing if desired */
  .navbar-nav {
    margin-top: 0.5em;
    border-top: 0px solid #000;
    border-bottom: 0px solid #000;
  }
}
/* Bootstrap  Nav bar end */


      .table-radio-label {
  display: inline-flex;  /* Keeps the label inline within the cell */
  align-items: center;   /* Perfectly centers the radio button vertically with the text */
  gap: 8px;              /* Creates clean spacing between the radio and the text */
  cursor: pointer;       /* Changes the mouse cursor to a pointer on hover */
 
}

/* Optional: Prevents the radio button from shrinking if the text is very long */
.table-radio-label input[type="radio"] {
  flex-shrink: 0;
}


/* Keeping Canvas small start */

.canvas-container {
  width: 300px;        /* Set whatever small size you want for the div */
  height: 200px;       
  /*border: 2px solid #ccc;*/
}

.canvas-container canvas {
  max-width: 100%;     /* Prevents the image from overflowing the div width */
  max-height: 100%;    /* Prevents the image from overflowing the div height */
  height: auto;        /* Maintains the original aspect ratio aspect */
  width: auto;
  object-fit: contain; /* Ensures the whole image fits without distortion or cropping */
}
 

/* Keeping Canvas small end */


/* Radio Button clean start */
.radio-image-label {
  display: flex;
  align-items: center; /* Aligns items vertically in the center */
  justify-content: center;
  gap: 10px;           /* Adds space between the radio button and image */
  cursor: pointer;
  flex-shrink: 0;
}
/* radio button clean end */


/* TOAST */
 /* Sleepy the Toast UI in the editor */
.toastui-editor-defaultUI .toastui-editor-contents::after,
.toastui-editor-defaultUI .toastui-editor-mode-switch {
    display: none !important;

    .logo-element {
    display: none !important;
}
}
.tui-image-editor-header-logo {
    display: none;
}

/* Toast UI visibility */
    .image-edit-container {
  display: none;
}
.show {
  display: block;
}

/* Justify */
        .justify-text {
    text-align: justify !important;
  }