#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 1001;
  background: #ccc;
}

#back-to-top:hover {
  color: #000;
}

.spoiler,
.blurIt {
  filter: blur(0.3125rem);
  transition: filter var(--transition-duration)
    var(--transition-timing-function);
}

.spoiler:hover,
.blurIt:hover {
  filter: none;
}

.roundIt {
  border-radius: var(--border-radius);
}

.centerIt {
  text-align: center;
}

.bulletIt {
  padding: 0.4375rem 1.5625rem 0.4375rem 0.4375rem;
  border-width: 0.3125rem;
  border-style: groove;
  border-color: var(--border-color);
  border-radius: 1.25rem 6.25rem 6.25rem 1.25rem;
}

.underlineIt {
  border-bottom: 0.0625rem solid var(--text-color);
}

.strikeIt {
  text-decoration: line-through;
}

.helpIt {
  cursor: help;
  color: #000;
  border-radius: var(--border-radius);
  padding: 5px;
}

.helpIt:hover {
  border: 1px solid var(--color-info);
  background: linear-gradient(
    to top,
    var(--color-info) 0%,
    rgba(255, 255, 255, 0.4) 20%
  );
}

/* Adjusted .app-icon styles for better readability */
.app-icon,
.app-icon-wide,
.app-icon-small {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-quaternary, #3D1A66);
  color: var(--text-primary, #FFFFFF);
  border: 1px solid var(--border-color, #341145);
  border-radius: var(--border-radius, 5px);
  padding: var(--spacing-small, 10px);
  text-align: center;
  text-decoration: none;
  min-width: 5.75rem;
  max-width: 7.4375rem;
  min-height: 3.875rem;
  font-size: var(--font-size-base, 16px);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.app-icon:hover,
.app-icon-wide:hover,
.app-icon-small:hover {
  transform: translateY(-2px);
  background: var(--bg-quaternary-light, #5A2A8A);
  color: var(--text-primary-light, #FFFFFF);
}

.app-icon:active,
.app-icon-wide:active,
.app-icon-small:active {
  transform: translateY(1px);
  background: var(--color-quaternary-light, #4A2375);
}

/* Wide app icons */
.app-icon-wide {
  max-width: 90%;
}

/* Small app icons */
.app-icon-small {
  font-size: var(--font-size-small, 14px);
  padding: calc(var(--spacing-small, 10px) * 0.8);
  min-width: 5.57rem;
  max-width: 7.3375rem;
  min-height: 3.875rem;
}

/* Updated menu styles for a navigation menu look with increased vertical spacing */

#menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu li {
  margin: 15px 0; /* Increased vertical spacing */
  text-align: left; /* Align text to the left */
}

#menu div {
  display: block; /* Changed to block for navigation menu look */
  padding: 10px 15px; /* Added padding for better spacing */
  background-color: var(--color-primary, #007bff);
  color: white;
  font-size: 16px; /* Adjusted font size */
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: var(--border-radius, 5px); /* Added border radius */
}

#menu div:hover {
  background-color: var(--color-primary-dark, #0056b3);
}

/* Dropdown menu styling */
#menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#menu ul li {
  margin: 5px 0;
}

#menu ul li div {
  background-color: var(--color-secondary, #0056b3);
  color: white;
  padding: 5px 10px;
  border-radius: var(--border-radius, 5px);
  transition: background-color 0.3s ease;
}

#menu ul li div:hover {
  background-color: var(--color-secondary-dark, #003f7f);
}

/* Added styles for the new vertical icon-based navigation system */
.icon-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon-nav li {
  margin: 10px 0;
}

.icon-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: 50%;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.icon-nav a:hover {
  background-color: var(--bg-secondary-light);
  transform: scale(1.1);
}

.icon-home::before {
  content: '\1F3E0'; /* Unicode for home icon */
}

.icon-about::before {
  content: '\2139'; /* Unicode for info icon */
}

.icon-contact::before {
  content: '\2709'; /* Unicode for envelope icon */
}

.unicodeProfileIt::after {
  content: " \01F464";
}

.unicodeCalendarIt::after {
  content: " \01F4C5";
}

.unicodeSearchIt::after {
  content: " \01F50D";
}

.unicodeClearIt::after {
  content: " \00239A";
}

.unicodeEditIt::after {
  content: " \00270F";
}

.unicodeDeleteIt::after {
  content: " \000078";
}

.unicodeOpenWindowIt::after {
  content: " \01F5D4";
}

.unicodeSaveIt::after {
  content: " \01F4BE";
}

.unicodeBizClientIt::after {
  content: " \01F3E2";
}

.unicodeDeafClientIt::after {
  content: " \01F9CF";
}

.unicodeUserIt::after {
  content: " \01F4BB";
}

.unicodeLocationIt::after {
  content: " \01F30E";
}

.unicodeContactIt::after {
  content: " \01F64B";
}

.unicodeHomeIt::after {
  content: " \01F3E0";
}

.unicodeDashboardIt::after {
  content: " \1F9ED";
}

.unicodeNotesIt::after {
  content: " \1F4DD";
}

.unicodeAppointmentIt::after {
  content: " \1F4CB";
}

.unicodeEmailIt::after {
  content: " \1F4E7";
}

.unicodeLogoutIt::after {
  content: " \1F6AA";
}