html, body {
  font-size: 1rem;
  font-family: "Helvetica Neue", Arial, sans-serif;
  color: #241f1a;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #fffdf8; }

a {
  color: #241f1a;
  text-decoration: none; }

a:hover {
  text-decoration: none; }

.bold {
  font-weight: 700; }

.layout-container {
  display: grid;
  height: 100vh;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-areas: "sidebar main"; }

.layout-sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 22px 16px 18px;
  background: #faf8f2;
  border-right: 1px solid #d9d2c4;
  overflow-y: auto; }

.layout-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px 22px;
  color: #241f1a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 17px;
  letter-spacing: .04em; }
  .layout-brand img {
    width: 30px;
    height: 30px; }
  .layout-brand:hover {
    color: #241f1a; }

.layout-nav {
  display: flex;
  flex-direction: column;
  gap: 2px; }
  .layout-nav .main-menu, .layout-nav .main-menu ul, .layout-nav .apps-menu, .layout-nav .apps-menu ul {
    display: contents; }
  .layout-nav li {
    list-style: none; }
  .layout-nav .admin-menu-item {
    order: 1;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #d9d2c4; }
  .layout-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 36px;
    padding: 0 10px;
    border-radius: 3px;
    color: #40372f;
    font-size: 13px; }
    .layout-nav a:hover {
      background: #f1ebdf;
      color: #241f1a; }
    .layout-nav a:focus-visible {
      outline: 2px solid #241f1a;
      outline-offset: -2px; }
    .layout-nav a.active {
      background: #ebe4d6;
      color: #241f1a;
      font-weight: 600; }
  .layout-nav .main-menu a::before {
    content: "";
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: var(--icon) center/contain no-repeat;
    mask: var(--icon) center/contain no-repeat; }
  .layout-nav .home-menu-item a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Crect x='2' y='2' width='5' height='5' rx='1'/%3E%3Crect x='9' y='2' width='5' height='5' rx='1'/%3E%3Crect x='2' y='9' width='5' height='5' rx='1'/%3E%3Crect x='9' y='9' width='5' height='5' rx='1'/%3E%3C/svg%3E"); }
  .layout-nav .admin-menu-item a {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Cpath d='M2 4.5h7M12 4.5h2M2 11.5h2M7 11.5h7'/%3E%3Ccircle cx='10.5' cy='4.5' r='1.5'/%3E%3Ccircle cx='5.5' cy='11.5' r='1.5'/%3E%3C/svg%3E"); }

.layout-nav .apps-menu .apps-menu-item {
  display: flex;
  align-items: center;
  gap: 10px; }

.layout-nav .apps-menu .app-icon {
  width: 16px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #67615a; }

.layout-nav .apps-menu li.active a, .layout-nav .apps-menu a.active {
  background: #ebe4d6;
  color: #241f1a;
  font-weight: 600; }
  .layout-nav .apps-menu li.active a .app-icon, .layout-nav .apps-menu a.active .app-icon {
    color: #241f1a; }

.layout-user {
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid #d9d2c4;
  font-size: 12px; }
  .layout-user .system-menu-outer, .layout-user .system-menu-outer > ul, .layout-user .dropdown {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none; }
  .layout-user .system-menu-toggle, .layout-user .dropdown-divider, .layout-user li:has(> a[name="link-to-login"]) {
    display: none; }
  .layout-user .dropdown-menu {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    float: none;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 12px; }
    .layout-user .dropdown-menu::before, .layout-user .dropdown-menu::after {
      display: none; }
    .layout-user .dropdown-menu > li:first-child {
      flex-basis: 100%; }
  .layout-user .pulldown-user-info {
    padding: 0 0 4px;
    color: #241f1a;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4; }
  .layout-user .dropdown-menu li a, .layout-user .system-menu a {
    display: inline;
    padding: 0;
    width: auto;
    color: #67615a;
    font-size: 12px;
    line-height: 1.6; }
    .layout-user .dropdown-menu li a:hover, .layout-user .system-menu a:hover {
      background: none;
      color: #241f1a; }
  .layout-user .system-menu ul {
    margin: 0;
    padding: 0; }
    .layout-user .system-menu ul li {
      display: inline;
      margin-right: 14px; }

.layout-main {
  grid-area: main;
  position: relative;
  min-width: 0;
  color: #241f1a;
  background: #f4f0e6; }

.layout-footer {
  display: flex;
  justify-content: space-between;
  padding: 24px 40px 20px;
  color: #67615a;
  font-size: 11px; }
  .layout-footer a {
    margin-right: 1em;
    color: #67615a; }
    .layout-footer a:hover {
      color: #241f1a; }

#pull-sheets-action, #double-check-action {
  background: #8b3f28;
  border-color: #8b3f28; }

#delete-action, #uncommit-action, #unconfirm-action {
  background: #fffdf8;
  color: #241f1a;
  border: thin solid #b8ad9d; }

.content .alert {
  position: absolute;
  width: 60%;
  margin-left: 20%;
  animation: fadeout 2s linear;
  text-align: center;
  opacity: 0; }

@keyframes fadeout {
  0% {
    opacity: 1; }
  70% {
    opacity: 1; }
  100% {
    opacity: 0; } }

.home-app .app-icons ul, .reports-app .app-icons ul, .dashboard-app .app-icons ul, .profile-app .app-icons ul {
  margin-top: 0; }

@media (max-width: 768px) {
  .layout-container {
    height: auto;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "sidebar" "main";
    grid-template-rows: auto 1fr; }
  .layout-sidebar {
    padding: 12px 16px 0;
    border-right: 0;
    border-bottom: 1px solid #d9d2c4; }
  .layout-brand {
    padding: 0 0 10px; }
  .layout-nav {
    flex-direction: row;
    gap: 4px;
    margin: 0 -16px;
    padding: 0 16px 10px;
    overflow-x: auto; }
    .layout-nav a {
      white-space: nowrap; }
    .layout-nav .admin-menu-item {
      margin: 0;
      padding: 0;
      border: 0; }
  .layout-user {
    margin: 0 -16px;
    padding: 10px 16px; }
  .layout-footer {
    padding: 20px 16px; } }