.bg-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-image: url('../res/logo_200.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  z-index: 0;
}

.blur-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-color: #08080860;
  z-index: 1;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  /* mask-image: radial-gradient(circle, transparent 40%, black 80%); */
  /* -webkit-mask-image: radial-gradient(circle, transparent 40%, black 80%); */
}

.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.03;
  z-index: 2;
}


.fixedElementsContainer {
  position: fixed;
  display: grid;
  top: 0;
  left: 0;
  /* grid-template-columns: var(--sidebar-left-width) 1fr var(--sidebar-right-width); */
  grid-template-columns: auto 1fr auto;
  grid-auto-rows: auto 1fr;
  height: 100%;
  width: 100%;
  pointer-events: none;
  z-index: 10;
}

.header, .sidebar {
  pointer-events: auto;
}

.header {
  grid-column: 1 / 4;
  grid-row: 1 / 2;
  background: linear-gradient(to right, #0000002b 20%, #00000047 80%);
  /* background-color: #a00 */
  /* color: #ff000077; */
  border-bottom: var(--line-color) 1px solid;
}
.header > #logo {
  color: #922216;
  font-weight: 500;
  font-size: 1.75em;
  margin: 5px;
  margin-bottom: 0px;
  float: right;
}

.sidebar {
  height: 100%;
  /* background-color: #202020; */
  overflow-y: auto;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  font-size: 1.1em;
}

.sidebar#sidebarLeft {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  /* width: 170px; */
  width: var(--sidebar-left-width);
  border-right: var(--line-color) 1px solid;
}

.sidebar#sidebarRight {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
  /* width: 60px; */
  width: var(--sidebar-right-width);
  border-left: var(--line-color) 1px solid;
  padding: 5px
}

.verticalList {
  flex-grow: 1;
}
.verticalList > * {
  /* margin-bottom: 5px; */
  width: 100%;
}

.submenu-wrapper {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding-left: 6px;
  width: 100%;
  box-sizing: border-box;
}


.mainPanel {
  position: relative;
  height: 100%;
  z-index: 5;

  padding-left: var(--sidebar-left-width);
  padding-right: var(--sidebar-right-width);
  min-height: 100%;
  box-sizing: border-box;

  /* margin: 30px; */

  overflow: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* backdrop-filter: blur(30px); */
}

.contentPanel {
  padding: 15px;
  background: none;
  /* backdrop-filter: blur(30px); */
  /* -webkit-backdrop-filter: blur(30px); */
}

.subpagePanel {
  padding: 15px;
  position: relative;
  /* overflow: hidden; */
}

.blurLinear {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  border: rgba(255, 253, 245, 0.075) 1px solid;

  background-color: #00000010;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  mask-image: linear-gradient(to right, black 60%, transparent 90%);
  -webkit-mask-image: linear-gradient(to right, black 60%, transparent 90%);
}

.subpageContent {
  position: relative;
}