@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
  }
  
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }
  
  #custom-floating-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    padding: 8px 0; /* This is content padding */
    z-index: 1000;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* color: #ffffff; */ /* Likely overridden by .custom-sidebar-item or not needed here */
    /* text-shadow: 0 1px 0 #000; */ /* Same as above */
    
    --border-angle: 0turn; /* For animation. */
    /* If you want a static white content background, simplify --main-bg */
    /* --main-bg: #ffffff; */ 
    --main-bg: conic-gradient(from var(--border-angle), #ffffff, #ffffff 5%, #ffffff 60%, #ffffff 95%);
    
    border: solid 5px transparent; /* Creates space for the border-box background */
    border-right-width: 0; /* Explicitly set right border width to 0 */
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  
    --gradient-border: conic-gradient(from var(--border-angle), transparent 25%, #08f, #f03 99%, transparent);
    
    background: 
      var(--main-bg) padding-box, /* Inner content background */
      var(--gradient-border) border-box, /* Animated border */
      var(--main-bg) border-box; /* Background color in the border area where --gradient-border is transparent */
    
    background-clip: padding-box, border-box, border-box; /* Explicitly set for clarity, though often inferred */
    
    animation: bg-spin 3s linear infinite;
  }
  
  .custom-sidebar-item {
      display: flex;
      flex-direction: column; /* Icon above text */
      align-items: center; /* Centers items horizontally */
      justify-content: center; /* Centers items vertically */
      padding: 12px 10px; /* Padding inside each item */
      text-decoration: none; /* Removes underline from links */
      color: #333333;
      font-size: 11px; /* Font size for labels */
      text-align: center; /* Centers text label */
      min-width: 60px; /* Minimum width of each item, adjust as needed */
      transition: background-color 0.2s ease-in-out; /* Smooth hover effect */
  }
  
  .custom-sidebar-item:hover {
      background-color: #f0f0f0; /* Background color on hover */
  }
  
  .custom-sidebar-icon {
      width: 28px; /* Width of the icon */
      height: 28px; /* Height of the icon */
      margin-bottom: 6px; /* Space between icon and text label */
      object-fit: contain; /* Ensures icon aspect ratio is maintained */
  }

  
  .custom-sidebar-label {
      line-height: 1.2; /* Line height for the label */
      word-break: keep-all; /* Prevents awkward word breaks, good for Korean */
      display: block; /* Ensures label takes its own space */
  }

/*
Hide on mobile screens
*/
@media only screen and (max-width: 479px) {
  #custom-floating-sidebar {
    display : none;
  }
}