/* The design system, lifted from the design files.
   Everything else is inline on the element, exactly as designed. */

* { box-sizing: border-box }

html, body { margin: 0; padding: 0; height: 100%; background: #F4EFE7 }

a { text-decoration: none; color: #0E7A57 }
a:hover { color: #0C6B4C }

input, select, textarea, button { font-family: 'Schibsted Grotesk', system-ui, sans-serif }
input:focus, select:focus, textarea:focus { outline: none; border-color: #16A16F !important }
button { border: none; background: none; padding: 0; cursor: pointer; color: inherit }

/* The UA rule for [hidden] is display:none, which an inline display:flex beats.
   Tab panels carry both, so this has to win. */
[hidden] { display: none !important }

.al-scroll > * { flex: none }
.al-scroll::-webkit-scrollbar { width: 9px }
.al-scroll::-webkit-scrollbar-thumb { background: rgba(150, 140, 125, .4); border-radius: 9px }
.al-scroll::-webkit-scrollbar-track { background: transparent }

.al-nav::-webkit-scrollbar { width: 7px }
.al-nav::-webkit-scrollbar-thumb { background: rgba(150, 140, 125, .35); border-radius: 7px }
.al-nav::-webkit-scrollbar-track { background: transparent }

@keyframes alMenuPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
@keyframes alRise { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
@keyframes alSpin { to { transform: rotate(360deg) } }

/* Hover states the design expresses as style-hover attributes. */
.al-row:hover { background: #F8F3EA }
.al-lift { transition: all .15s ease }
.al-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(40, 30, 18, .1); border-color: #CFE5DA }
.al-side-item:hover { background: #EFE7D8 }
.al-menu-item:hover { background: #F2EADB }
.al-menu-item-green:hover { background: #F1F8F4 }
.al-menu-item-red:hover { background: #FBEAE8 }
.al-ws-trigger:hover { border-color: #CFE5DA }
.al-cta:hover { transform: translateY(-1px) }
.al-outline:hover { border-color: #12996B }

@media (max-width: 980px) {
  .al-shell { flex-direction: column !important; height: auto !important; min-height: 100vh !important }
  .al-side { width: 100% !important; height: auto !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; border-right: none !important; border-bottom: 1px solid #EAE1D2 !important; position: sticky; top: 0; z-index: 30 }
  .al-side-logo { padding: 12px 14px 10px !important }
  .al-side-ws { flex: 1 1 200px !important; padding: 0 12px 0 0 !important }
  .al-side-promo { display: none !important }
  .al-side-user { border-top: none !important; padding: 0 10px 0 0 !important }
  .al-nav { order: 9 !important; flex: 1 1 100% !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; padding: 0 10px 8px !important; gap: 6px !important }
  .al-nav > div { display: none !important }
  .al-nav > a { flex: none !important; margin-bottom: 0 !important; white-space: nowrap !important }
  .al-bar { height: auto !important; flex-wrap: wrap !important; gap: 10px !important; padding: 12px 16px !important }
  .al-tabs { overflow-x: auto !important; gap: 18px !important; padding: 0 16px !important }
  .al-body { padding: 16px 16px 40px !important }
  .al-g2, .al-g3 { grid-template-columns: 1fr !important }
  .al-g4 { grid-template-columns: 1fr 1fr !important }
  .al-table { overflow-x: auto !important }
  .al-table > * { min-width: 740px !important }
  .al-wrap { padding-left: 20px !important; padding-right: 20px !important; padding-top: 48px !important; padding-bottom: 48px !important }
  .al-wrap.al-g2, .al-wrap.al-g3, .al-wrap.al-g4 { gap: 36px !important }
  .al-hbar { height: auto !important; padding: 12px 20px !important }
  .al-navlinks { display: none !important }
  .al-xl { font-size: 38px !important; line-height: 1.06 !important }
  .al-lg { font-size: 28px !important; line-height: 1.14 !important }
}

@media (max-width: 620px) {
  .al-g4 { grid-template-columns: 1fr !important }
  .al-xl { font-size: 30px !important }
  .al-lg { font-size: 23px !important }
}