/* color variables and setup */
:root {
  --page-bg-color: white;
  --navbar-bg-color: white;
  --section-1-color: hsl(218, 31%, 20%);
  --section-1-bg-color: hsl(0, 0%, 92%);
  --section-2-color: hsl(218, 31%, 20%);
  --section-2-bg-color: white;
  --read-icon-color: #7a869a;
  --read-icon-brd-color: #7a869a;
  --read-icon-bg-color: #ebecf0;
  --unread-icon-color: white;
  --unread-icon-brd-color: white;
  --unread-icon-bg-color: #2563eb;
  --list-even-bg-color: white;
  --list-odd-bg-color: #EBECF0;
  --list-icon-read-color: #ebecf0;
  --list-icon-unread-color: #2563eb;
}

body.light {
  --page-bg-color: white;
  --navbar-bg-color: hsl(223, 22%, 97%);
  --section-1-color: hsl(218, 31%, 20%);
  --section-1-bg-color: hsl(0, 0%, 92%);
  --section-2-color: hsl(218, 41%, 40%);
  --section-2-bg-color: hsl(0, 0%, 97%);
  --read-icon-color: #7a869a;
  --read-icon-brd-color: #7a869a;
  --read-icon-bg-color: #ebecf0;
  --unread-icon-color: white;
  --unread-icon-brd-color: white;
  --unread-icon-bg-color: #2563eb;
  --list-even-bg-color: hsl(207, 22%, 99%);
  --list-odd-bg-color: hsl(207, 22%, 96%);
  --list-icon-read-color: hsl(207, 40%, 97%);
  --soft-list-icon-unread-color: hsl(207, 40%, 57%);
	--list-icon-unread-color: hsl(223, 60%, 52%);
}
body.light ul.list-group-category-brown {
  --section-1-bg-color: hsl(15, 20%, 93%);
  --section-2-bg-color: hsl(15, 20%, 97%);
  --read-icon-color: hsl(15, 20%, 37%);
  --read-icon-brd-color: hsl(15, 20%, 67%);
  --read-icon-bg-color: hsl(15, 20%, 97%);
  --unread-icon-color: hsl(15, 20%, 93%);
  --unread-icon-brd-color: hsl(15, 20%, 67%);
  --unread-icon-bg-color: hsl(15, 20%, 47%);
}
body.light ul.list-group-category-beige {
  --section-1-bg-color: hsl(30, 40%, 92%);
  --section-2-bg-color: hsl(30, 40%, 97%);
  --read-icon-color: hsl(30, 40%, 37%);
  --read-icon-brd-color: hsl(30, 40%, 67%);
  --read-icon-bg-color: hsl(30, 40%, 97%);
  --unread-icon-color: hsl(30, 40%, 92%);
  --unread-icon-brd-color: hsl(30, 40%, 67%);
  --unread-icon-bg-color: hsl(30, 40%, 47%);
}
body.light ul.list-group-category-blue {
  --section-1-bg-color: hsl(210, 40%, 92%);
  --section-2-bg-color: hsl(210, 40%, 97%);
  --read-icon-color: hsl(210, 40%, 37%);
  --read-icon-brd-color: hsl(210, 40%, 67%);
  --read-icon-bg-color: hsl(210, 40%, 97%);
  --unread-icon-color: hsl(210, 40%, 92%);
  --unread-icon-brd-color: hsl(210, 40%, 67%);
  --unread-icon-bg-color: hsl(210, 40%, 47%);
}
body.light ul.list-group-category-purple {
  --section-1-bg-color: hsl(290, 40%, 92%);
  --section-2-bg-color: hsl(290, 40%, 97%);
  --read-icon-color: hsl(290, 40%, 37%);
  --read-icon-brd-color: hsl(290, 40%, 67%);
  --read-icon-bg-color: hsl(290, 40%, 97%);
  --unread-icon-color: hsl(290, 40%, 92%);
  --unread-icon-brd-color: hsl(290, 40%, 67%);
  --unread-icon-bg-color: hsl(290, 40%, 47%);
}
body.light ul.list-group-category-green {
  --section-1-bg-color: hsl(70, 40%, 92%);
  --section-2-bg-color: hsl(70, 40%, 97%);
  --read-icon-color: hsl(70, 40%, 37%);
  --read-icon-brd-color: hsl(70, 40%, 67%);
  --read-icon-bg-color: hsl(70, 40%, 97%);
  --unread-icon-color: hsl(70, 40%, 92%);
  --unread-icon-brd-color: hsl(70, 40%, 67%);
  --unread-icon-bg-color: hsl(70, 40%, 47%);
}
body.light ul.list-group-category-ivory {
  --section-1-bg-color: hsl(47, 24%, 92%);
  --section-2-bg-color: hsl(47, 24%, 97%);
  --read-icon-color: hsl(47, 24%, 37%);
  --read-icon-brd-color: hsl(47, 24%, 67%);
  --read-icon-bg-color: hsl(47, 24%, 97%);
  --unread-icon-color: hsl(47, 24%, 92%);
  --unread-icon-brd-color: hsl(47, 24%, 67%);
  --unread-icon-bg-color: hsl(47, 34%, 47%);
}
body.light ul.list-group-category-royalblue {
  --section-1-bg-color: hsl(207, 22%, 92%);
  --section-2-bg-color: hsl(207, 22%, 97%);
  --read-icon-color: hsl(207, 18%, 37%);
  --read-icon-brd-color: hsl(207, 22%, 67%);
  --read-icon-bg-color: hsl(207, 22%, 97%);
  --unread-icon-color: hsl(207, 22%, 92%);
  --unread-icon-brd-color: hsl(207, 22%, 67%);
  --unread-icon-bg-color: hsl(207, 40%, 47%);
}
body.light ul.list-group-category-slateblue {
  --section-1-bg-color: hsl(223, 23%, 92%);
  --section-2-bg-color: hsl(223, 25%, 97%);
  --read-icon-color: hsl(223, 17%, 37%);
  --read-icon-brd-color: hsl(223, 20%, 67%);
  --read-icon-bg-color: hsl(223, 25%, 97%);
  --unread-icon-color: hsl(223, 23%, 92%);
  --unread-icon-brd-color: hsl(223, 20%, 67%);
  --unread-icon-bg-color: hsl(223, 28%, 47%);
}
body.light ul.list-group-category-warmgray {
  --section-1-bg-color: hsl(330, 3%, 92%);
  --section-2-bg-color: hsl(330, 4%, 97%);
  --read-icon-color: hsl(330, 4%, 37%);
  --read-icon-brd-color: hsl(330, 4%, 67%);
  --read-icon-bg-color: hsl(330, 4%, 97%);
  --unread-icon-color: hsl(330, 3%, 92%);
  --unread-icon-brd-color: hsl(330, 4%, 67%);
  --unread-icon-bg-color: hsl(330, 4%, 47%);
}
body.light ul.list-group-category-coolgray {
  --section-1-bg-color: hsl(210, 2%, 92%);
  --section-2-bg-color: hsl(210, 1%, 97%);
  --read-icon-color: hsl(210, 1%, 37%);
  --read-icon-brd-color: hsl(210, 1%, 67%);
  --read-icon-bg-color: hsl(210, 1%, 97%);
  --unread-icon-color: hsl(210, 2%, 92%);
  --unread-icon-brd-color: hsl(210, 1%, 67%);
  --unread-icon-bg-color: hsl(210, 1%, 47%);
}

body.dark {
  --page-bg-color: hsl(40, 11%, 11%);
  --navbar-bg-color: hsl(0, 0%, 27%);
  --section-1-color: hsl(38, 77%, 85%);
  --section-1-bg-color: hsl(0, 0%, 27%);
  --section-2-color: hsl(38, 77%, 80%);
  --section-2-bg-color: hsl(0, 0%, 16%);
  --read-icon-color: hsl(0, 0%, 47%);
  --read-icon-brd-color: hsl(0, 0%, 27%);
  --read-icon-bg-color: hsl(0, 0%, 17%);
  --unread-icon-color: white;
  --unread-icon-brd-color: brown;
  --unread-icon-bg-color: brown;
}

/* gray background */
#page-mount[style="background-color: lightgrey;"] > div.page {
	background-color: hsl(330, 1%, 88%);
}

/* odd posts background */
body.light ul.posts-list li:nth-child(odd) .panel-post {
  background-color: hsl(330, 1%, 88%) !important;
}

#page-mount[style="background-color: lightgrey;"] 
  ul.posts-list li:nth-child(odd) .panel-post {
  background-color: hsl(330, 1%, 84%) !important;
}


/* navigation bar */
nav.navbar {
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  background-color: var(--navbar-bg-color) !important;
}

body.light {
	--btn-pri-bg-color: hsl(223, 60%, 52%);
}

body.light #styleSwitch {
  background-color: var(--btn-pri-bg-color) !important;
}

body.light .post-heading .label-unread {
  background-color: var(--btn-pri-bg-color) !important;
}
	
body.light 	.btn-primary, body.light .btn-primary.disabled, body.light .btn-primary.disabled:active, body.light .btn-primary.disabled:hover, body.light .btn-primary:disabled, body.light .btn-primary:disabled:hover {
		background: var(--btn-pri-bg-color) !important;
		border: 1px solid var(--btn-pri-bg-color) !important;
	}

body.light 	.btn-primary.btn-outline, body.light .btn-primary.btn-outline.disabled, body.light .btn-primary.btn-outline.disabled:active, body.light .btn-primary.btn-outline.disabled:hover, body.light .btn-primary.btn-outline:disabled, body.light .btn-primary.btn-outline:disabled:hover {
		background: var(--btn-pri-bg-color) !important;
		border: 1px solid var(--btn-pri-bg-color) !important;
	}

body.light 	button.btn.btn.btn-primary.btn-outline.btn-block {
		border-color: var(--btn-pri-bg-color) !important;
		background: var(--btn-pri-bg-color) !important;
	}


/* temporary fix for dark theme */
/*.light {*/


/* first-level categories */
li.list-group-item-first h4.media-heading a {
  color: var(--section-1-color) !important;
}
li.list-group-item-first div.category-last-thread {
  display: none !important;
}

/* second-level categories */
li.list-group-item:not(.list-group-item-first) h4.media-heading a {
  color: var(--section-2-color) !important;
  font-size: 0.9em !important;
  /*font-style: italic !important;*/
}

/* avatars */
.category-last-thread a img {
  max-width: 36px;
  max-height: 36px;
  filter: grayscale(10%);
}
.category-last-thread a:hover img {
  filter: unset;
}

/* specific categories -classname, like -news - not used*/
/*
li.list-group-item-category-news {
  background-color: red !important;
}
li.list-group-item-category-photo-d {
  background-color: yellow !important;
}
*/

/* category CSS */

/* first level category */
ul.list-group-category li.list-group-item.list-group-item-first {
  background-color: var(--section-1-bg-color) !important;
}
/* everything under first level category */
ul.list-group-category li.list-group-item:not(.list-group-item-first) {
  background-color: var(--section-2-bg-color) !important;
}
ul.list-group-category div.read-status.item-read {
  background-color: var(--read-icon-bg-color) !important;
  border: 1px solid var(--read-icon-brd-color) !important;
}
ul.list-group-category div.read-status.item-read .material-icon {
  color: var(--read-icon-color) !important;
}

ul.list-group-category div.read-status.item-new {
  background-color: var(--unread-icon-bg-color) !important;
  border: 1px solid var(--unread-icon-brd-color) !important;
}  
ul.list-group-category div.read-status.item-new .material-icon {
  color: var(--unread-icon-color) !important;
}

@media(min-width:992px) {
  body.light .col-md-3 {
    width: 22%;
  }
}

/* attempt to override dark theme selectors */
body.dark div.categories-list ul .btn .material-icon {
  background-color: var(--read-icon-bg-color) !important;
  color: var(--read-icon-color) !important;
}
body.dark div.categories-list ul .category-main .media-left .read-status.item-new {
  background-color: var(--unread-icon-bg-color) !important;
}
  
body.dark .category-main .media-left .read-status {
  background-color: var(--read-icon-bg-color) !important;
  /*  box-shadow:inset 0px 0px 0px 0.3px var(--cat-color) !important; */
}
  
body.dark .category-main .media-left .material-icon {
  color: var(--read-icon-color) !important;
}


/* threads list */
li.list-group-item:nth-child(2n+1) {
  background: var(--list-odd-bg-color) !important;
}
li.list-group-item:nth-child(2n) {
  background: var(--list-even-bg-color) !important;
}
a.threads-list-icon {
  background-color: var(--list-icon-read-color) !important;
}
a.threads-list-icon-new {
  background-color: var(--list-icon-unread-color) !important;
}


/*}*/

/* footer */
.pager-more {
  margin-bottom: 20px;
}

#misago-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.misago-footer {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0px;
  padding-bottom: 17px;
  background-color: var(--navbar-bg-color);
  text-align: center;
}

.misago-footer ul {
  margin-bottom: 1px;
}
.misago-footer li.site-footnote {
  display: block;
}
.misago-footer .footer-content {
  border-top: none;
}

/* show-hide and beautify some third-level cats */

div.row.subcategories-list {
  display: none !important;
}
li.list-group-item-category-show-children div.row.subcategories-list,
li.show-children div.row.subcategories-list {
  display: block !important;
}

div.row.subcategories-list {
  margin-top: 0px;
  margin-left: 32px;
}
div.row.subcategories-list > div {
  padding-left: 10px;
  padding-right:0 !important;
}
body.light .row.subcategories-list .btn {
  background-color: var(--section-1-bg-color) !important;
}
/*
div.row.subcategories-list div {
  padding-right:0 !important;
}
*/
div.row.subcategories-list .col-md-3 {
  width: fit-content !important;
}
div.row.subcategories-list .btn {
  margin-top: 10px;
}
div.row.subcategories-list .btn-group-sm>.btn, div.row.subcategories-list  .btn-sm {
  border-radius: 6px;
  padding: 2px 8px;
}
div.row.subcategories-list .btn .material-icon {
  display: none !important;
}