/*
#light
  --h1colour:#505050;
  --h2colour:#505050;
  --link: #1360a8;
  --lowcolour: #707070;
  --main-colour: #404040;
  --main-background-colour: #fff;
  --body-colour:#505050;
  --body-background-colour: #f6f6f6;
  --selcolour: 3px solid #FA9F70;
  --body-hr: 1px solid #e9e9e9;
  --content-maxwidth: 1348px;

  --header-height: 100px;
  --header-colour: black;
  --header-background-colour: white;
  --header-menubar-colour:white;
  --header-menubar-background:;
  --header-menubar-link: black;
  --header-menubar-hover: blue;
  --header-menubar-hover-background: black;
  --header-menubar-hover-colour:;

  --sub-header-height: 60px;
  --sub-header-colour: white;
  --sub-header-background-colour: black;

  --right-panel-colour: #404040;
  --right-panel-background-colour: white;

  --footer-height: 50px;
  --footer-background-colour: #f9f9f9;
  --footer-colour: #404040;
  --footer-link-colour: #404040;

  --block-border: #e9e9e9;
  --block-background: white;
  --block-shadow: 0px 0px 5px 2px #e9e9e9;  

  --menubar-background:#f6f6f6;
  --menubar-colour:black;
  --menubar-link: #222;
  --menubar-hover: #111;
  --menubar-hover-background: white;
  --menubar-hover-colour: 3px solid #FA9F70;

  --toolbar-link: #707070;
  --toolbar-hover: #707070;
  --toolbar-hover-background:rgba(19, 96, 168, 0.1);

  --leftnav-width: 320px;
  --leftnav-colour: #404040;
  --leftnav-hover-colour: #404040;
  --leftnav-hover-background-colour: rgba(19, 96, 168, 0.1);
  --leftnav-icon-colour: #909090;
  --leftnav-border-colour: #e0e0e0;
  --leftnav-background-colour: #fdfdfd;
  --leftnav-link: #202020;
  --leftnav-shadow:;
  --selcolour: 3px solid #FA9F70;

  --icon-colour: #909090;
  --pin-colour:#1360a8;

#dark
  --h1colour:#505050;
  --h2colour:#505050;
  --link: #1360a8;
  --lowcolour: #707070;
  --main-colour: #404040;
  --main-background-colour: #fff;
  --body-colour:#505050;
  --body-background-colour: #f6f6f6;
  --selcolour: 3px solid #FA9F70;
  --body-hr: 1px solid #101010;
  --content-maxwidth: 1348px;

  --header-height: 100px;
  --header-colour: black;
  --header-background-colour: white;
  --header-menubar-colour:white;
  --header-menubar-background:;
  --header-menubar-link: black;
  --header-menubar-hover: blue;
  --header-menubar-hover-background: black;
  --header-menubar-hover-colour:;

  --sub-header-height: 60px;
  --sub-header-colour: white;
  --sub-header-background-colour: black;

  --right-panel-colour: #404040;
  --right-panel-background-colour: white;

  --footer-height: 50px;
  --footer-background-colour: #f9f9f9;
  --footer-colour: #404040;
  --footer-link-colour: #404040;

  --block-border: #d9d9d9;
  --block-background: white;
  --block-shadow: 0px 0px 5px 2px #e9e9e9;  

  --menubar-background:#f6f6f6;
  --menubar-colour:black;
  --menubar-link: #222;
  --menubar-hover: #111;
  --menubar-hover-background: white;
  --menubar-hover-colour: 3px solid #FA9F70;

  --toolbar-link: #707070;
  --toolbar-hover: #707070;
  --toolbar-hover-background:rgba(19, 96, 168, 0.1);

  --leftnav-width: 320px;
  --leftnav-colour: #404040;
  --leftnav-hover-colour: #404040;
  --leftnav-hover-background-colour: rgba(19, 96, 168, 0.1);
  --leftnav-icon-colour: #909090;
  --leftnav-border-colour: #e0e0e0;
  --leftnav-background-colour: #fdfdfd;
  --leftnav-link: #202020;
  --leftnav-shadow:;
  --selcolour: 3px solid #FA9F70;

  --icon-colour: #909090;
  --pin-colour:#1360a8;
*/

:root {
  --h1colour:#505050;
  --h2colour:#505050;
  --link: #1360a8;
  --lowcolour: #707070;

  --main-colour: #404040;
  --main-background-colour: #fff;
  --body-colour:#505050;
  --body-colour-light:#618ad0;
  --body-background-colour: #f6f6f6;
  --body-hr: 1px solid #e9e9e9;
  --selcolour: 3px solid #FA9F70;

  --breadcrumb-background-colour: white;
  --breadcrumb-border: 1px solid #c0c0c0;
  
  --content-maxwidth: 1348px;

  --header-height: 100px;
  --header-colour: black;
  --header-background-colour: white;
  --header-menubar-colour:white;
  --header-menubar-background:;
  --header-menubar-link: black;
  --header-menubar-hover: blue;
  --header-menubar-hover-background: black;
  --header-menubar-hover-colour:;

  --sub-header-height: 60px;
  --sub-header-colour: white;
  --sub-header-background-colour: black;

  --right-panel-colour: #404040;
  --right-panel-background-colour: white;

  --footer-height: 50px;
  --footer-background-colour: black;
  --footer-colour: white;
  --footer-link-colour: white;

  --block-border: #d9d9d9;
  --block-background: white;
  --block-shadow: 0px 0px 5px 2px #e9e9e9;  

  --menubar-background:#f6f6f6;
  --menubar-colour:black;
  --menubar-link: #222;
  --menubar-hover: #111;
  --menubar-hover-background: white;
  --menubar-hover-colour: 3px solid #FA9F70;

  --toolbar-link: #707070;
  --toolbar-hover: #707070;
  --toolbar-hover-background:rgba(19, 96, 168, 0.1);

  --leftnav-width: 320px;
  --leftnav-colour: #404040;
  --leftnav-hover-colour: #404040;
  --leftnav-hover-background-colour: rgba(19, 96, 168, 0.1);
  --leftnav-icon-colour: #909090;
  --leftnav-border-colour: #e0e0e0;
  --leftnav-background-colour: #fdfdfd;
  --leftnav-link: #202020;
  --leftnav-shadow:;
  --selcolour: 3px solid #FA9F70;

  --icon-colour: #909090;
  --no-icon-selected: red;
  --yes-icon-selected: green;
  --pin-colour:#1360a8;

  --category-block-background-colour: white;
  --post-solution-background-colour: #FBF7ED;
}

.clearfix {
  overflow: auto;
}

.clearfix::after {
  clear: both;
}

a.anchor {
	display: block;
	position: relative;
	top: var(--header-height);
}

html, body {
  font-family: "Arial", "Lato", Open Sans, sans-serif;
  line-height: 1.8em;
  background:var(--body-background-colour);
  color: var(--body-colour);
  margin: 0em;
}

body {
  min-height: 100%;
  height: 100%;
}

a{
  color: var(--link);
  text-decoration: inherit;
}

h1 {
  font-size: 1.8em !important;
  margin-bottom: 0px;
}

h2 {
  font-size: 1.4em !important;
  margin:0px;
  padding: 0px;
}

h3 {
  font-size: 1.2em !important;
  margin:0px;
  padding: 0px;
}

p {
  font-size: 1em;
}

hr {
  border-top: var(--body-hr);
  width: 95%;
}

.icon-filled {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}

.button {
  background: transparent;
  border: none;
  border: none;
  color: blue;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  margin: 5px;
  right: 0;
  bottom: 0;
}

.standard-button {
  padding: 5px 15px 5px 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  border: 2px solid;
  border-radius: 20px;
  background: none;
  font-weight: bold;
  text-decoration: none;
}

.block:hover .button{
	visibility: visible;
}

.icon-top-right {
  cursor: pointer;
  user-select: none;
  position: absolute;
  right: 5px;
  top:0;
}

.category-block {
	background-color: var(--category-block-background-colour);
}

.narrow {
  min-width: 120px !important;
}

.no-width {
  min-width: 0px !important;
}

.tiny-width {
  min-width: 40px !important;
}

.extra-padding {
  padding: 10px 25px 10px 25px;
}

.silent-link {
  color: inherit;
  text-decoration: none;
}

.username {
  font-weight: bold;
  color: var(--body-colour) !important;
}

.username a{
  text-decoration: none;
}

.usertitle {
  color: var(--body-colour-light) !important;
}

.inline {
  position: relative;
  display:flex;
  justify-content: center;
  top: -2px;
  font-size: 1.2em;
}

.unread-title {
  font-weight: bold;
  color: var(--body-colour) !important;
}
.read-title {
  font-weight: bold;
  color: var(--link) !important;
}

.unread-description {
  color: var(--link);
}

.read-description {
  color: var(--link);
}

.table-standard {
  width: 100%;
  border-collapse: collapse;
}

.table-standard tr {
  padding: 6px;
  border-bottom: var(--body-hr);
}


.table-topics, .table-categories {
  width: 100%;
  border-collapse: collapse;
}

.table-topics th:nth-child(2), .table-topics td:nth-child(2) {
  display: none;
}


.table-topics th, .table-categories th{
  padding: 6px;
  vertical-align: top;
}

.table-topics tr, .table-categories tr{
  padding: 6px;
  border-bottom: var(--body-hr);
}

.table-topics td, .table-categories td{
  vertical-align: middle;
  text-align: left;
}

.table-topics, .table-categories tr:first-child:hover {
  background-color: inherit;
}

.no-decoration {
  text-decoration: inherit;

}

.table-nowrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: inherit;
 }

.toolbar{
}

.options-holder{
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 10px;
}

input, select{
  font-family: "Arial", "Lato", Open Sans, sans-serif;
  font-size:1em;
  line-height: 1.6em;
  color: #303030;
  background-color: rgba(19, 96, 168, 0.1);
  border: 1px solid #e9e9e9;
  border-radius: 20px;
  padding: 8px 15px 8px 15px;
}

.hidden {
	display:none;
}

.bullet {
	display: inline-block;
	height: 9px;
	width: 9px;
	margin: 0 5px 0 10px;
	border-radius: 50%;
}

.breadcrumbs {
/*	position: sticky;
	top: calc(var(--header-height) + var(--sub-header-height));
	z-index:2;
	*/
	position: relative;
	margin: 0px;
	padding: 5px 10px 5px 10px;
	background-color: var(--breadcrumb-background-colour);
	border-bottom: var(--breadcrumb-border);
/*	width: 100%; */
}

.heading {
  display: flex;
}

.row {
  display: flex;
  width: 100%;
}

.info-block {
  display: flex;
  flex-wrap: nowrap;
}

.blocks {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  }

.blocks-full {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.block {
  position: relative;
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  margin: 10px 5px 0px 5px;
}

.min-width {
  min-width: 200px;
}

.block-small {
  min-width: 0px !important;
}

.grow-hover:hover{
  transform: scale(1.02);
  box-shadow: var(--block-shadow);
}

.grow-hover a{
  color: inherit !important;
  text-decoration: none;
  text-wrap: wrap; 
}

.border {
  border: 1px solid var(--block-border);
}

.radius {
  border-radius: 5px;
}

.shadow {
  box-shadow: var(--block-shadow);
}

.fullwidthblock {
  flex-grow: 1;
  flex-basis: 0;
  padding: 10px;
  background-color: var(--block-background);
}

.txt-very-large {
  font-size: 6em !important;
  padding-top: .1em;
  padding-bottom: .5em;
}
.txt-xx-large{
  font-size: 4em !important;
}

.txt-large {
  font-size: 2em !important;
  padding-top: .1em;
  padding-bottom: .1em;
}

.txt-medium {
  font-size: 1.3em !important;
}

.txt-regular{
  font-size: 1em !important;
}

.txt-small{
  font-size: 0.8em !important;
}

.txt-bold{
  font-weight: bold;
}

.banner-img{
  margin-left: -10px;
  margin-right: -10px;
  min-height:100%;
  width:100%;
  z-index:1;
}
 
.banner-wrapper .banner-blur{
  height:100%;
  width:100%;
  background:rgba(217,217,217,.07);
  backdrop-filter:blur(3px);
  z-index:2;
 }

.vertical-center {
  display: flex;
  flex-direction: column;
  vertical-align: middle;
  justify-content: center;
  min-height: 100vh;
}

.flex-left {
  display: flex;
  justify-content: flex-start;
}

.flex-right {
  display: flex;
  justify-content: flex-end;
}

.flex-center {
  display: flex;
  justify-content: center;
}

.flex-middle {
  display: flex;
  align-items: center;
}


.left {
  text-align: left;
}

.right {
  text-align: right;
}

.center {
  text-align: center;
}

.bold {
  font-weight: bold;
}

.full {
  width:93%;
}

.block-options {
  text-align: left;
}

.user-block {
  display: flex;
  padding-bottom: 4px;
  align-items: center top;
  line-height: 20px;
}

.summary-block {
  flex-grow: 1;
  font-weight: bold;
}

.user-block span {
  color: var(--lowcolour);
  font-size: 0.9em;
}

.small-user-icon-text {
  font-size: .7em;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border: 1px solid white;
}

.user-icon-text {
  font-size: 1em;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  vertical-align:middle;
  border: 1px solid white;
}

.medium-user-icon-text {
  font-size: 1.2em;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  vertical-align:middle;
  border: 1px solid white;
}

.large-user-icon-text {
  font-size: 2em;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  vertical-align:middle;
  border: 2px solid white;
}

.user-menu-icon {
	margin: 0 10px 0 10px;
	padding: 0px !important;
}

.small-circle {
  font-size: .7em;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  vertical-align:middle;
}

.circle {
  font-size: .5em;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  vertical-align:middle;
  border: 2px solid white;
}

.medium-circle {
  font-size: 1.2em;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  vertical-align:middle;
}

.big-circle {
  font-size: 2em;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  line-height: 2.5em;
  text-align: center;
  vertical-align:middle;
}

.circle-button {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align:middle;
  background-color: #505050;
  color: white;
}

.circle-button a:hover {
  background-color: white;
  color: #505050;

}

.no-padding {
  padding: 0px;
}

.no-margin {
  margin: 0px;
}

.no-top-margin {
  margin-top: 0px;
}

.margin-left{
  margin-left: 0;
  margin-right: auto;
}

.margin-right{
  margin-left: auto;
  margin-right: 0;
}

.margin-auto{
  margin: auto;
}

.margin-middle{
  margin-top: auto;
  margin-bottom: auto;
}

.margin-center{
  margin-left: auto;
  margin-right: auto;
}

.q-button {
  border-radius: 8px;
  width: 50px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  vertical-align:middle;
  background-color: #505050;
  color: white;
}

.q-button a:hover {
  background-color: white;
  color: #505050;

}

pre code {
    overflow: auto;
    -moz-tab-size: 4;
    tab-size: 4;
}

code {
  background-color: var(--body-background-colour);
}

.pin-colour {
  color:var(--pin-colour);
}

.colour-low {
  color:var(--lowcolour);
}

.colour-light {
  color:var(--body-colour-light);
}

.theme, .theme h2{
  background-color: var(--body-background-colour);
  color: var(--body-colour);
}

.theme a{
  color: var(--link);
}

.green, .green h2 {
  background-color: #d2fbd2;
  color:#008000;
}

.green a{
  color:#0c1fb3;
}

.turquoise, .turquoise h2 {
  background-color: #21b7b3;
  color:white;
}

.turquoise a{
  color:white;
}

.dark-green, .dark-green h2 {
  background-color: green;
  color:white;
}

.dark-green a{
  color:white;
}

.blue {
  color:#1360a8;
  background-color: #1360a833;
}

.blue h2 {
  color:#1360a8;
 }

.blue a{
  color:#1360a8;
}

.yellow {
  color:#505050;
  background-color: #fdce0d;
}

.yellow h2 {
  color:#505050;
 }
 
.yellow a,.yellow span{
  color:#808080;
}

.light-yellow {
  color:#505050;
  background-color: #f6f1e8;
}

.light-yellow h2 {
  color:#505050;
 }
 
.light-yellow a,.light-yellow span{
  color:#808080;
}


.dark-blue {
  color:white;
  background-color: #1360a8;
}

.dark-blue h2 {
  color:white;
 }
 
.dark-blue a,.dark-blue span{
  color: white;
  text-decoration: none;
}

.black {
  background-color: #505050;
  color: white;
}

.black h2 {
  color:white  ;
}

.black a{
  color: white;
}

.gray{
  background-color: #3f3f37;
  color:white;
}

.gray h2{
  color:white;
}

.gray a,.gray span{
  text-decoration: none;
  color: white;
}

.pink, .pink h2{
  background-color: #fbd2de;
  color:#770036;
}

.pink a{
  color: #0c1fb3;
}

.white, .white h2{
  background-color: white;
  color:#505050;
}

.white a{
  color: #0c1fb3;
}

.light-gray, .light-gray h2{
  background-color: #f0f0f0;
  color:#505050;
}

.light-gray a,.light-gray span{
}

.orange, .orange h2 {
  background-color: #e1ca85;
  color:#cd660b;
}

.orange, .orange h2 {
  background-color: orange;
  color: white;
}

.orange a {
  color: white;
  text-decoration: none;
}


.top-green {
  background-color: #63e6be;
  padding-top: 8px;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  height: 70px;
  border-radius: 0px 0px 0px 0px;
}

.top-blue {
  background-color: #74c0fc;
  padding-top: 8px;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  height: 70px;
  border-radius: 0px 0px 0px 0px;
}

.top-orange {
  background-color: #FA9F70;
  padding-top: 8px;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  height: 70px;
  border-radius: 0px 0px 0px 0px;
}

.top-purple {
  background-color: #FA82EC;
  padding-top: 8px;
  margin-top: -15px;
  margin-left: -15px;
  margin-right: -15px;
  height: 70px;
  border-radius: 0px 0px 0px 0px;
}

.top-green h2, .top-blue h2, .top-orange h2, .top-purple h2{
  background-color: inherit;
}

.icon-no{
	color:var(--no-icon-selected);
}

.icon-yes{
	color:var(--yes-icon-selected);
}

.resize-animation-stopper * {
  transition: none !important;
  animation: none !important;
}

.sel-vert {
  border-right: var(--selcolour);
}

.sel-hor {
  border-bottom: var(--selcolour);
}


.resizable-logo {
  width: 60vw;
  max-width: 400px;
}

.logo {
  display:inline-flex;
  white-space:nowrap;
  align-items: center;
}

#logo {
  flex: 100%;
}

#small-logo {
  flex:0%;
}

#header-section {
  display:flex;
  flex:100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  overflow: hidden;
}

#header-section-body {
  display:none;
  overflow: hidden;
}

.hbar {
  position: fixed;
  display: flex;
  top: 0;
  width: 100%;
  background-color: white;
  height: 85px;
  overflow: hidden;
}

.toolbar-items {
  margin: 8px;
  display: inline-block;
  line-height: 2.3em;
}

.toolbar-items a{
  margin-right: 5px;
  padding:8px 16px;
  text-decoration: none;
  color: var(--toolbar-link);
}

.toolbar-items a:hover {
  color: var(--toolbar-hover);
  background: var(--toolbar-hover-background);
}


.header-bar-items {
  display: flex;
  height: 100%;
  padding-right: 0px;
  line-height: var(--sub-header-height);
  white-space: nowrap;
}

.header-bar-items a{
  color: var(--menubar-link);
  text-decoration: none;
  padding-left: 10px;
  align-items: center;
}

.header-bar-items li{
  float: left;
}

.header-bar-items-right {
  float: right !important;
  padding-right: 10px;
}

.header-bar-items-left {
  float: left !important;
}

.menubar {
  position: fixed;
  display: inline-block;
  top: 85px;
  width: 100%;
  background-color: var(--menubar-background);
  height: 43px;
  box-shadow: var(--block-shadow);
  overflow: hidden;
}

.user-menu-items {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  box-shadow:var(--leftnav-shadow);
  color: var(--leftnav-colour);
}

.user-menu-items a:hover{
  background-color: var(leftnav-hover-background-colour);
  color: var(--leftnav-hover-colour);
}

.menubar ul{
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.menubar-items {
  display: flex;
  height: 100%;
  padding-right: 0px;
  line-height: var(--sub-header-height);
  white-space: nowrap;
}

.menubar-items a{
  color: var(--menubar-link);
  text-decoration: none;
  padding: 0 10px 0 10px;
  align-items: center;
}

.menubar-items li{
  float: left;
}

.menubar-items-right {
  float: right !important;
  padding-right: 10px;
}

.menubar-items-left {
  float: left !important;
}

.menubar-user-items {
  display: flex;
  float: left;
  height: 100%;
  line-height: var(--sub-header-height);
}

.menubar-user-items li{
  float: left;
}

.menubar-user-items a{
  display: flow;
  padding:0px 16px;
  color: var(--menubar-link);
  text-decoration: none;
}

.submenubar-items a:hover {
  background: var(--menubar-hover-background);
  border-bottom: var(--menubar-hover-colour);
  color: var(--menubar-hover);
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
  padding-left: 0px;
}

.caret::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0da";
  color: grey;
  font-weight: bold;
  display: inline-block;
  margin: 0 5px;
}

.caret-open::before {
  font-family: "Font Awesome 5 Free";
  content: "\f0d7";
  color: grey;
  font-weight: bold;
  display: inline-block;
  margin: 0 5px;
}

.nested {
  display: none;
}

.active {
  display: block;
}

.header {
	display: flex;
    position: fixed;
	top: 0px;
    width: 100%;
    height: var(--header-height);
    max-height: var(--header-height);
    color: var(--header-colour);
    background-color: var(--header-background-colour);
    transition: 0.4s;
    overflow: hidden;
	height: 100px;
    z-index: 3;
}

.sub-header {
    position: fixed;
    display: block;
    float: left;
    top: var(--header-height);
    width: 100%;
    height: var(--sub-header-height);
    border-bottom: 1px solid var(--leftnav-border-colour);
    color: var(--sub-header-colour);
    background-color: var(--sub-header-background-colour);
    transition: 0.4s;
	overflow: hidden;
    z-index: 4;
}

.sub-header input[type=text] {
    padding-top:10px;
    float: right;
	margin-top: 6px;
	width: 50%;
    border: none;
}

.sub-header a{
  color: var(--sub-header-colour);
  cursor:pointer
}


.main {
    width: 100%;
	margin: 0 auto;
	margin-top: calc(var(--header-height) + var(--sub-header-height))
}
  
.mainbody {
    width: 100%;
}

.navicon {
  width: 2.2rem;
  justify-content: center;
}

.navicon:hover{
  cursor: pointer;
}

.leftnav {
    position: fixed;
    top: calc(var(--header-height) + var(--sub-header-height));
    height: calc(100% - var(--header-height) - var(--sub-header-height));
    left: 0px;
    width: var(--leftnav-width);
    max-width: var(--leftnav-width);
    color: var(--leftnav-colour);
    background-color: var(--leftnav-background-colour);
    overflow: auto;
    transition: 0.4s;
    z-index: 99;
    border-right: 1px solid var(--leftnav-border-colour);
    box-shadow: var(--leftnav-shadow);
}

.leftnav li {
  list-style-type: none;
  padding-left: 20px;
}

.leftnav ul li:hover{
  cursor: pointer;
  background-color: var(--leftnav-hover-background-colour);
}

.leftnav li a{
  display: flex;
  padding: 0px 0px 0px 0px;
  width: 100%;
  text-decoration: none;
  cursor: pointer;
}

.leftnav ul li:hover a{
  color: var(--leftnav-hover-colour);
}

.leftnav ul{
  white-space: nowrap;
  line-height: 30px;
  margin: 0px;
  padding:0px;
}

.leftnav p{
  white-space: wrap;
}

.leftnav hr{
	border-top: 1px solid var(--leftnav-border-color)
}

.content {
    margin-left: calc(var(--leftnav-width));
    width: calc(100% - var(--leftnav-width));
/*    max-width: var(--content-maxwidth);
    margin: auto; */
    background-color: var(--content-background-colour);
    transition: 0.3s;
}

.content-body {
    flex: 80%;
    color: var(--main-colour);
    background-color: var(--main-background-colour);
}

.static-content-body {
	padding: 0 10px 0 10px;
}

/* .right-panel {
    flex: 20%;
    padding-left: 8px;
    padding-right: 8px;
    color: var(--right-panel-colour);
    background-color: var(--right-panel-background-colour);
}
*/

.footer-block {
	margin: 0 20px 0 20px;
}

.footer {
	position: relative;
    margin-left: calc(var(--leftnav-width));
    width: calc(100% - var(--leftnav-width)px);
    color: var(--footer-colour);
    background-color: var(--footer-background-colour);
}

.footer-inner {
  margin:auto;
  max-width: var(--content-maxwidth);
}

.footer ul{
  list-style-type: none;
  white-space: nowrap;
  padding-inline-start: 5px;
}

.footer a{
  text-decoration: none;
  color: var(--footer-link-colour);
}

.follow {
	cursor:pointer;
}

@media only screen and (min-width: 720px) {
	#logo {
		display:block;
	}
	#small-logo {
		display:none;
	}
}

@media only screen and (max-width: 720px) {
	#logo {
		display:block;
	}
	#small-logo {
		display:none;
	}
	.content {
		flex-wrap: wrap;
	}

    .submenubar-items {
		justify-content: space-evenly;
    }
	.can-hide {
		display:none !important;
	}

	.block {
	  padding: 5px;
	  min-width: 200px;
	}

	.table-categories th,td:last-child{
	  display: none;
	}
	.table-topics th,.table-topics td:nth-child(2) {
	  display: inline;
	}
	.table-topics th,.table-topics td:nth-child(3),.table-topics td:nth-child(4),.table-topics td:nth-child(5) {
	  display: none;
	}
}

@media only screen and (max-width: 400px) {
	:root {
	--header-height: 80px;
    --sub-header-height: 40px;
	}

	#logo {
		display:block !important;
	}
	#small-logo {
		display:none !important;
	}

	.resizable-logo {
	  width: 80vw;
	  max-width: 360px;
	}

	body {
	  font-size:14px;
	  line-height: 1.8em;
	}

	.content {
		flex-wrap: wrap;
	}
	.block {
	  padding: 5px;
	  min-width: 200px;
	}

	.hide-mobile {
		display:none !important;
	}
	.table-categories th,td:last-child{
	  display: none;
	}
	.table-topics th,.table-topics td:nth-child(2) {
	  display: inline;
	}
	.table-topics th,.table-topics td:nth-child(3),.table-topics td:nth-child(4),.table-topics td:nth-child(5) {
	  display: none;
	}
}

@media only screen and (max-width: 350px) {
	:root {
	--header-height: 60px;
    --sub-header-height: 40px;
	}
	#logo {
		display:none !important;
	}
	#small-logo {
		display:block !important;
	}
	.can-hide {
		display:none !important;
	}
}


/* fix for google fonts   */
.material-symbols-outlined {
  display: inline-flex;
  vertical-align: middle;
  line-height: inherit !important;
}

@font-face {
  font-family: 'material-symbols-outlined';
  font-style: normal;
  font-weight: 400;
  font-display: none;
}

.dropdown-menu {
  display: none;
  position: absolute;
  background-color: white;
  padding: 10px;
  text-align: left;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  right: -20px;
  z-index: 1;
}

.dropdown-menu a {
  color: black;
  text-decoration: none;
  display: block;
}

.dropdown-menu a:hover {
  background-color: #ddd;
}

/* .dropdown {
  position: relative;
  display: inline-block;
} */

.show {
  display: inline-block !important;
}

.options {
  padding: 5px 20px 5px 20px;
}

.options:hover .dropdown-menu {
  display: block;
}

.options:hover {
  background-color: rgba(19, 96, 168, 0.1);
}

.align-bottom {
  position: absolute;
  right: 20px;
  bottom: 10px;
}

.options-bottom-right {
  cursor: pointer;
  position: absolute;
  bottom: 0px;
  right: 10px;
  display: none;
}

.options-top-right {
  cursor: pointer;
  position: absolute;
  top: -3px;
  right: 0;
  display: none;
}

.category a {
  color: var(--link);
  text-decoration: none;
}

.category p{
  margin: 0px;
}

.sub-categories {
  line-height: 1.2em;
}

.sub-category {
  font-size: .9em;
  color: var(--h1colour);
  text-decoration: none;
  white-space: nowrap;
}

.sub-category a{
  font-weight: normal !important;
}

.sub-category:hover{
  color: var(--link);
}

.post-solution {
  background-color: var(--post-solution-background-colour);
}

.popup {
	cursor: auto;
	position: fixed; 
	padding: 10px;
	background-color:var(--body-background-colour);
    color: var(--body-colour);
	border: 1px solid #c0c0c0;
    box-shadow: var(--block-shadow);
	z-index: 3;
}

.popup a {
    color: var(--link-colour);
	text-decoration: underline;
}

.close-button {
  user-select: none;
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 6px;
}

.close-button:after {
  content: "X";

}

.post {
  width: 100%;
}

.vote-result {
	position:absolute;
	bottom: 8px;
	top: 8px;
	font-size: 2em;
}