/**
 * Sets z-index and transform for toast elements. 
 * Gives toasts a high z-index to appear over other content.
 * Centers toasts horizontally and positions them below the viewport.
*/
#toast,
/**
 * Sets z-index and transform for toast elements. 
 * Gives toasts a high z-index to appear over other content.
 * Centers toasts horizontally and positions them below the viewport.
*/
#errorToast,
/**
 * Sets z-index and transform for toast elements. 
 * Gives toasts a high z-index to appear over other content.
 * Centers toasts horizontally and positions them below the viewport.
*/
#printToast {
  z-index: 9999;
  transform: translate(-50%, -100%);
}


.nav-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 22px;
    width: 22px;
  }
  
  .nav-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    transition: all 100ms ease-in-out;
  }
  
  .nav-toggle:hover {
    cursor: pointer;
  }
  
  .x:nth-of-type(1) {
    transition: all 100ms ease-in-out;
    transform: rotate(45deg);
    transform-origin: top left;
    width: 28px;
  }
  
  .x:nth-of-type(2) {
    transition: all 100ms ease-in-out;
    transform-origin: center;
    width: 0;
  }
  
  .x:nth-of-type(3) {
    transition: all 100ms ease-in-out;
    transform: rotate(-45deg);
    transform-origin: bottom left;
    width: 28px;
  }

  @keyframes breathing {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.breathing-icon {
    animation: breathing 5s ease-in-out infinite;
}


/* Global styles for a sleek, Apple-like scrollbar */

/* For Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 12px; /* Adjust the scrollbar width */
  height: 12px; /* Adjust the scrollbar height for horizontal scrollbars */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* Semi-transparent track */
  border-radius: 10px; /* Rounded corners for the track */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.5); /* Dark, semi-transparent thumb */
  border-radius: 10px; /* Rounded corners for the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.8); /* Darker thumb on hover for better visibility */
}

/* For Firefox */
* {
  scrollbar-width: thin; /* Slimmer scrollbar */
  scrollbar-color: rgba(0, 0, 0, 0.5) rgba(0, 0, 0, 0.1); /* Thumb and track color */
}