/**
 * Web-only layout. Selektorer bruker `id` satt via `nativeID` (webLayoutIds).
 */

#root {
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

#cwNativeStackRoot {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#cwRootStackLayout {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

#cwMonthScreen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#cwMonthBodyRow {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
}

#cwMonthMainCol {
  flex: 1 1 0;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
}

#cwMonthScroll {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1;
  min-height: 0;
  box-sizing: border-box;
}

#cwMonthRail {
  flex: 0 0 auto;
  width: 176px;
  max-width: 36vw;
  min-width: 140px;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#cwMonthGridSection {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#cwCalendarScreen {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#cwCalendarToolbar {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#cwCalendarBody {
  display: flex;
  flex-direction: row;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  align-items: stretch;
  gap: 10px;
  box-sizing: border-box;
}

/*
 * Ikke width:100% her — i body-raden vil det spise hele raden slik at rail får 0 px.
 */
#cwCalendarMain {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

#cwCalendarRail {
  flex-shrink: 0;
  width: 176px;
  max-width: 40vw;
  min-width: 140px;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
}

#cwCalendarRailInner {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

#cwMarkedDaysScroll {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}