/*
 *= require font-awesome
 */

.required:after {
    content: " *";
    color: red; /* You can adjust the color as needed */
}

:root {
  --navbar-width: 15rem;
  --content-margin: 16rem;
}

@media (min-width: 640px) {
  nav[data-controller="navbar"] {
    width: var(--navbar-width) !important;
  }
  .sm\:ml-64 {
    margin-left: var(--content-margin) !important;
  }
}

/* application.css */

/* When the nav has the 'is-shrunk' class, hide these specific children */
.is-shrunk .navbar-header,
.is-shrunk .navbar-school-year,
.is-shrunk #menu-list span,
.is-shrunk li[id$="-dropdown"],
.is-shrunk ul[id$="-dropdown-menu"] {
    display: none !important;
}

/* Center the icons when text is hidden */
.is-shrunk #menu-list a {
    justify-content: center;
}