body {
  visibility: hidden; /* Hide everything */
}
body .no-js-message {
  visibility: visible; /* Make .no-js-message visible */
}
body.authorized {
  visibility: visible; /* Show only for authorized users */
}

body.authorized .md-nav {
  display: visible; /* Hide navigation until authorized */
}

body:not(.authorized) .md-nav {
  display: none; /* Hide navigation until authorized */
}


/* Default: Hide all content */
.md-header,
.md-container,
.md-main {
  display: none; /* Hide by default */
}

/* Restore specific styles for header */
.js-enabled .md-header {
  display: flex; /* Ensure header uses flexbox for layout */
  align-items: center; /* Vertically align items */
  justify-content: space-between; /* Spread out items */
}

.js-enabled .md-container {
  display: inherit; /* Restore grid layout for the container */
}

.js-enabled .md-main {
  display: block; /* Use block layout for main content */
}

.js-enabled .md-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.js-enabled .md-header__title {
  flex-grow: 1;
  text-align: center; /* Centers the title */
}

.js-enabled .md-header__button.md-logo,
.md-header__button.md-icon {
  margin-left: 10px;
  margin-right: 10px;
}

/* Show content when JavaScript is enabled */
.js-enabled body {
  display: flex; /* Use flexbox layout for the body */
  flex-direction: column; /* Stack content vertically */
  min-height: 100vh; /* Ensure body takes the full viewport height */
}

/* Main content area */
.md-main {
  flex: 1; /* Push the footer to the bottom if content is short */
}

/* No-JavaScript message */
.no-js-message {
  display: block; /* Ensure visibility */
  padding: 20px;
  background-color: #f8d7da;
  color: #721c24;
  text-align: center;
  font-size: 16px;
  border: 1px solid #f5c6cb;
}