$primary: #ff66ac;
$dark: #23183E;
$secondary: #E2E8F0;
$danger: #E53E3E;
$white: #ffffff;
$black: #121213;
$light: #E6E9F0;
$success: #38a169;
$muted: #718096;
$info: #168EEA;

$purple: #ff66ac;
$red: #E53E3E;
$gray: #718096;
$green: #38A169;

$gray-100: #F5F7FA;
$gray-200: #EDF2F7;
$gray-300: #E2E8F0;
$gray-400: #CBD5E0;
$gray-500: #A0AEC0;
$gray-600: #718096;

$upvote: #ff66ac;
$downvote: #38B2AC;
$admin: #ff66ac;
$banned: #FEB2B2;
$deleted: #FEFCBF;
$deletedandbanned: #ffcc99;
$mod: #07c20c;
$code: #e83e8c;

$gold: #ECC94B;
$reddit: #ED4630;

$theme-colors: (
	"primary": $primary,
	"secondary": $secondary,
	"danger": $danger,
	"dark": $dark,
	"white": $white,
	"black": $black,
	"light": $light,
	"success": $success,
	"muted": $muted,
	"downvote": $downvote,
	"upvote": $upvote,
	"purple": $purple,
	"gold": $gold,
	"admin": $admin,
	"gray": $gray,
	"gray-100": $gray-100,
	"gray-200": $gray-200,
	"gray-300": $gray-300,
	"gray-400": $gray-400,
	"gray-500": $gray-500,
	"gray-600": $gray-600,
	"reddit": $reddit
);


$input-border-color: $gray-300;
$border-color: $gray-300;

$border-radius: .35rem;
$border-radius-sm: .25rem;


$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";



$font-size-base: 1rem;

$medium-font-size: 0.9rem;

$small-font-size: 12px;

$extra-small-font-size: 11px;

$display5-size:	3rem !default;

$display5-weight: 400;

$lead-font-size: $font-size-base * 1.325 !default;


$font-weight-bold: 600;
$font-weight-bolder: 700;
$headings-font-weight: $font-weight-bold;


$spacer: 1rem;
$spacers: (
	6: ($spacer * 3.5),
	7: ($spacer * 5),
	8: ($spacer * 10)
);


$sizes: () !default;
$sizes: map-merge(
	(
	25: 25%,
	50: 50%,
	75: 75%,
	100: 100%,
	130: 130%,
	auto: auto
	),
	$sizes
);


$box-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);

$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.05);

$box-shadow-lg: 0 8px 20px 0 rgba( $black, .1 );


$tooltip-opacity: 1;


$yiq-contrasted-threshold:	160 !default;


@each $color, $value in $theme-colors {
	.bd-callout-#{$color} {
		border-left-color: #{$value};
	}
	}

@import "./bootstrap/bootstrap.scss";

html {
	font-size: 14px;
}

@supports (font-variation-settings: normal) {
	html { font-family: 'Inter var', sans-serif; }
	}

body {
	color: $black;
	padding-top: 49px;
	background-color: $gray-300;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (min-width: 1200px) {
	.container{
		max-width: 1300px;
	}
}

p {
	font-size: 14px;
}

pre {
	white-space: pre-wrap;		 /* Since CSS 2.1 */
	white-space: -moz-pre-wrap;	/* Mozilla, since 1999 */
	white-space: -pre-wrap;		/* Opera 4-6 */
	white-space: -o-pre-wrap;	/* Opera 7 */
	word-wrap: break-word;		 /* Internet Explorer 5.5+ */
}

body.using-mouse :focus {
	outline: none;
}

#settings, #submit {
	padding-top: 98px;
	background-color: $white;
}

#page {
	padding-top: 49px;
	background-color: $white;
}

#article {
	padding-top: 0;
	background-color: $white;
}

#thread, #userpage {
	background-color: $gray-100;
}


#article .navbar-light .navbar-nav .nav-link {
	color: $black;
}

#article .navbar-light .navbar-nav .nav-link:hover {
	background-color: transparent;
	color: $primary;
}

#article .navbar-light .navbar-nav .nav-link:focus {
	background-color: transparent;
	color: $primary;
}

.article-title {
	margin-bottom: 3rem;
	font-weight: $font-weight-bold;
	line-height: 3rem;
	margin-top: 2rem;
}


#thread .custom-gutters {
	padding: 0 15px;
	background-color: $white;
}

.custom-gutters {
	padding-left: 15px;
	padding-right: 15px;
}


.sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 49px;
	height: auto;
	overflow-y: auto;
	z-index: 4;
}

.sticky-63 {
	position: -webkit-sticky;
	position: sticky;
	top: 63px;
	height: auto;
	overflow-y: auto;
	z-index: 2;
}

.sticky-105 {
	position: -webkit-sticky;
	position: sticky;
	top: 105px;
	height: auto;
	overflow-y: auto;
	z-index: 4;
}


.text-lg {
	font-size: $font-size-lg!important;
}

.text-base {
	font-size: $font-size-base!important;
}

.text-small {
	font-size: $small-font-size!important;
}

.text-small-extra {
	font-size: $extra-small-font-size!important;
}

.display-5 {
	@include font-size($display5-size);
	font-weight: $display5-weight;
	line-height: $display-line-height;
}

.lead {
	font-weight: $font-weight-normal;
}

#page p {
	font-size: 16px;
}


a.dropdown-toggle:hover {
	text-decoration: none;
}


.comment-text ul li ul {
	padding-left: 0;
}

ul.no-bullets {
	list-style-type: none;
}

ol > li {
	list-style-type: none;
	counter-increment: count;
	margin-bottom: .75rem;
}

ol > li::before {
	content: counter(count) ".";
	font-weight: $font-weight-bold;
	margin-right: 0.5rem;
}

.footer .list-inline-item:not(:last-child) {
	margin-right: 1.5rem;
}

[data-bs-toggle="collapse"] .fa:before {	 
	content: "\f139";
	}
[data-bs-toggle="collapse"].collapsed .fa:before {
	content: "\f13a";
}


.btn {
	font-weight: $font-weight-bold;
	font-size: $font-size-base;
	border-radius: $border-radius-sm;
}

.btn-sm {
	padding: 0.375rem 0.75rem;
	font-size: $small-font-size;
}

.btn-lg {
	font-size: $font-size-base;
}

.btn-secondary {
	color: $gray;
}

.btn-tag {
	border-radius: 3rem;
	font-size: $small-font-size;
	padding: 0.25rem 0.5rem;
	line-height: 1;
}

.btn-tag:hover {
	color: $black;
}

.btn.disabled, .btn:disabled {
	opacity: .5;
}

.btn-success, .btn-danger {
	color: $white;
}

.btn.login, .btn.register {
	height: calc(1.5em + 0.75rem + 2px);
	border-radius: .35rem;
}

.btn-group.btn-integration {
	border-radius: $border-radius;
	border: 1px solid $border-color;
}

.btn-integration {
	font-weight: $font-weight-bold;
	border-left: 1px solid $border-color;
}

.btn-integration .fab, .btn-integration .fas, .btn-integration .far {
	font-size: $lead-font-size;
	vertical-align: middle;
}


.tooltip {
	font-weight: $font-weight-bold;
}

.tooltip-inner {
	background-color: $black;
	}

.tooltip.bs-tooltip-right .arrow:before {
	border-right-color: $black !important;
}

.tooltip.bs-tooltip-left .arrow:before {
	border-left-color: $black !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
	border-bottom-color: $black !important;
}

.tooltip.bs-tooltip-top .arrow:before {
	border-top-color: $black !important;
}


.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid $border-color;
	border-left-width: .25rem;
	border-radius: .25rem;
}


.alert {
	padding: .5rem 1rem;
}

.alert-dismissible .close {
	padding: 0.5rem 1.25rem;
	bottom: 0;
}

.alert-dismissible .close .fa, .alert-dismissible .close .fas, .alert-dismissible .close .far, .alert-dismissible .close .fab {
	margin-right: 0rem;
}

.alert .fa, .alert .fas, .alert .far, .alert .fab {
	margin-right: 0.5rem;
}


.toast {
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	color: $white;
	border: 0;
	display: none;
	position: fixed;
	bottom: 1.5rem;
	margin: 0 auto;
	left: 1.5rem;
	right: 0;
	width: 300px;
	z-index: 1041;
	background-color: $black;
	border-radius: $border-radius;
}


.navbar-light {
	background-color: $white;
}

.navbar-toggler-icon {
	width: auto;
	height: auto;
}

.navbar-toggler-icon, .navbar-dark .navbar-toggler-icon, .navbar-light .navbar-toggler-icon {
	background: transparent;
}

.navbar-toggler, .navbar-dark .navbar-toggler, .navbar-light .navbar-toggler {
	border: none;
}

.navbar-expand-md .navbar-nav .nav-link {
	padding-left: 1rem;
	padding-right: 1rem;
}

#page .navbar-light .navbar-nav .nav-link {
	color: $dark;
}

#page .navbar-light .navbar-nav .nav-link:hover {
	background-color: transparent;
	color: $primary;
}

.navbar-brand, .navbar-light .navbar-brand {
	color: $purple;
	font-weight: $font-weight-bold;
}

.tab-bar {
	box-shadow: inset 0 -1px 0 $border-color;
	border-top-left-radius: $border-radius;
	border-top-right-radius: $border-radius;
	padding: .75rem 1rem 0 1rem;
	background-color: $white;
	z-index: 5;
}


.navbar-nav .nav-link {
	padding: 0.25rem 0.5rem;
}

.navbar-expand-md .navbar-nav .nav-link {
	padding: 0.25rem 0.5rem;
}

.navbar-light .navbar-nav .nav-link {
	color: $black;
}

.navbar-light .navbar-nav .nav-link:hover {
	background-color: $light;
	border-radius: $border-radius
}

.navbar-light .navbar-nav .nav-link:focus {
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: $border-radius;
}

.navbar-light .navbar-nav .nav-link:active .fa, .navbar-light .navbar-nav .nav-link:active .fas, .navbar-light .navbar-nav .nav-link:active .far, .navbar-light .navbar-nav .nav-link:active .fab {
	color: $primary;
	text-align: center;
	font-size: $font-size-base;
}

.navbar-light .navbar-nav .nav-link .fa, .navbar-light .navbar-nav .nav-link .fas, .navbar-light .navbar-nav .nav-link .far, .navbar-light .navbar-nav .nav-link .fab {
	color: $gray-500;
	text-align: center;
	font-size: $font-size-base;
}

.navbar-light .navbar-nav .btn-primary.nav-link {
	color: $white;
}

.navbar-light .navbar-nav .btn-outline-primary.nav-link {
	color: $primary;
}

.navbar-light .navbar-nav .btn-outline-primary.nav-link:hover {
	color: $white;
}

.navbar-dark .navbar-nav .nav-link {
	color: $white;
}

.navbar-dark .navbar-nav .nav-link:hover {
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: $border-radius;
}

.navbar-dark .navbar-nav .show>.nav-link:focus, .navbar-dark .navbar-nav .show>.nav-link:active, .navbar-dark .navbar-nav .show>.nav-link:hover {
	background-color: $light;
	border-radius: $border-radius
}

.navbar-dark .navbar-nav .nav-link .fa, .navbar-dark .navbar-nav .nav-link .fas, .navbar-dark .navbar-nav .nav-link .far, .navbar-dark .navbar-nav .nav-link .fab {
	color: $white;
	text-align: center;
	font-size: $font-size-lg;
}

.navbar-dark .navbar-nav .show>.nav-link:focus .fa, .navbar-dark .navbar-nav .show>.nav-link:focus .fas, .navbar-dark .navbar-nav .show>.nav-link:focus .far, .navbar-dark .navbar-nav .show>.nav-link:focus .fab {
	color: $black;
}

.navbar-dark .navbar-nav .nav-link:hover:active .fa, .navbar-dark .navbar-nav .nav-link:hover:active .fas, .navbar-dark .navbar-nav .nav-link:hover:active .far, .navbar-dark .navbar-nav .nav-link:hover:active .fab {
	color: $white;
}

.badge-count {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: $danger;
	position: absolute;
	color: $white;
	font-size: 10px;
	font-weight: $font-weight-bold;
	top: -4px;
	left: 12px;
	border: 2px solid $white;
	padding: 0 2px 2px 2px;
}

.post-nav .nav-link {
	color: $muted;
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	padding: 0.75rem 1rem;
}

.settings-nav .nav-link {
	color: $gray;
	font-size: $font-size-base;
	font-weight: $font-weight-normal;
	padding: 0.75rem 1rem;
}

.post-nav > .nav-item > .nav-link.active {
	color: $primary;
}

.settings-nav > .nav-item > .nav-link.active {
	color: $primary;
	box-shadow: inset 0 -2px 0 $primary;
}

.post-nav .nav-link:hover, .post-nav .nav-link:focus, .settings-nav .nav-link:hover, .settings-nav .nav-link:focus {
	color: $primary;
}

.post-nav .nav-link:hover .fa , .post-nav .nav-link:focus .fa, .post-nav .nav-link:hover .fas, .post-nav .nav-link:focus .fas, .post-nav .nav-link:hover .far, .post-nav .nav-link:focus .far, .post-nav .nav-link:hover .fab , .post-nav .nav-link:focus .fab {
	color: $primary;
}

.post-nav > .nav-item > .nav-link.active .fa, .post-nav > .nav-item > .nav-link.active .fas, .post-nav > .nav-item > .nav-link.active .far, .post-nav > .nav-item > .nav-link.active .fab {
	color: $primary;
}

.post-nav .fa, .post-nav .fas, .post-nav .far, .post-nav .fab, .post-nav .fal {
	font-size: $small-font-size;
	margin-right: .5rem;
	color: $gray-500;
}


.settings-nav > .nav-item > .nav-link.active {
	color: $primary;
	box-shadow: inset 0 -2px 0 $primary;
}

.settings-nav > .nav-item > .nav-link.active .fa, .settings-nav > .nav-item > .nav-link.active .fas, .settings-nav > .nav-item > .nav-link.active .far, .settings-nav > .nav-item > .nav-link.active .fab {
	color: $primary;
}

.settings-nav .fa, .settings-nav .fas, .settings-nav .far, .settings-nav .fab, .settings-nav .fal {
	font-size: $small-font-size;
	margin-right: .5rem;
	color: $muted;
}


.color-picker input[type="radio"] {
	display: none;
}

label.color-radio {
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 0.5rem 1rem 0.5rem 0;
	cursor: pointer;
}

label.color-radio span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 100%;
	text-align: center;
	line-height: 2.25;
}



#page .nav-pills .nav-link {
	border-radius: 0;
	font-size: 1rem;
	font-weight: $font-weight-bold;
	color: $muted;
	border-bottom: 2px solid transparent;
	padding: 1rem 1.5rem;
}

#page .nav-pills .nav-link:hover {
	color: $primary;
}

#page .nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	color: $primary;
	background-color: transparent;
	transition: ease 0.25s;
	border-bottom: 2px solid $primary;
}

#page .bg-light .nav-pills .nav-link.active, .bg-light .nav-pills .show > .nav-link {
	color: $primary;
	background-color: transparent;
	transition: ease 0.25s;
	border-bottom: 2px solid $primary;
}


.form-inline.search .form-control:hover, .form-inline.search .form-control:active, .form-inline.search .form-control:focus {
	border-color: $purple;
}

.form-inline.search .form-control:active, .form-inline.search .form-control:focus {
	background-color: $white;
}

.form-inline.search .form-control {
	background-color: $gray-200;
	font-size: $font-size-base;
}

.form-inline.search .input-group-append .input-group-text .fa.fa-search {
	color: $black;
	opacity: .25;
}

.form-inline.search .form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: $black;
	opacity: .25; /* Firefox */
}

.form-inline.search .form-control::-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: $black;
	opacity: .25;
}

.form-inline.search .form-control::-ms-input-placeholder { /* Microsoft Edge */
	color: $black;
	opacity: .25;
}

.form-inline.search .form-control:active::placeholder, .form-inline.search .form-control:focus::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: $black;
}

.form-inline.search .form-control:active::-ms-input-placeholder, .form-inline.search .form-control:focus::-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: $black;
}

.form-inline.search .form-control:active::-ms-input-placeholder, .form-inline.search .form-control:focus::-ms-input-placeholder{ /* Microsoft Edge */
	color: $black;
}


.bg-svg {
	background-color: $dark;
	background-attachment: fixed;
	background-size: cover;
}


.form-control {
	color: $muted;
	border-color: transparent;
	border-width: 2px;
	background: $gray-100;
	transition: none;
}

.home-submission .form-control, .home-submission .input-group-text {
	border-color: $border-color;
	background-color: $white;
}

.home-submission .input-group-prepend .fa, .home-submission .input-group-prepend .fas, .home-submission .input-group-append .fa, .home-submission .input-group-append .fas {
	color: $gray-300;
}

.input-group-append-focus {
	margin-left: -1px;
}

.form-control:hover {
	color: $black;
	background-color: #ffffff;
	outline: 0;
	border-color: $primary;
	box-shadow: none;
}

.form-control:focus, .form-control:active {
	color: $black;
	background-color: #ffffff;
	outline: 0;
	border-color: $primary;
	box-shadow: none;
}

.form-check-label {
	margin-bottom: 0;
	text-transform: none;
	font-weight: $font-weight-normal;
	font-size: $font-size-base;
	letter-spacing: 0;
}

label {
	text-transform: uppercase;
	font-weight: $font-weight-bold;
	font-size: 12px;
	letter-spacing: 0.025rem;
	color: $black;
}

#login label {
	color: $black;
}

label.terms {
	font-weight: normal;
	text-transform: none;
	font-size: 13px;
	color: $black;
	vertical-align: middle;
	padding: .1rem 0;
}

.dropdown-menu {
	padding: 0.5rem;
}

.user-profile > .dropdown-toggle::after {
	display:none;
}

.dropdown-item {
	padding: 0.5rem 1rem;
	border-radius: $border-radius;
}

.dropdown .dropdown-menu .dropdown-meta {
	padding: 0.5rem 1rem;
}

.dropdown-item:hover, .dropdown-item:focus, .dropdown-item.active {
	color: $black;
	text-decoration: none;
	background-color: $gray-200;
}

.dropdown-item:hover .fas, .dropdown-item:focus .fas, .dropdown-item.active .fas, .dropdown-item:hover .far, .dropdown-item:focus .far, .dropdown-item.active .far
.dropdown-item:hover .fa, .dropdown-item:focus .fa, .dropdown-item.active .fa {
	color: $black;
}


small, .small {
	font-size: $small-font-size;
}


th {
	font-weight: $font-weight-bold;
}


.fa-rotate-45 {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.fa-rotate--45 {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.icon::before {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.fa-icon-circle {
	font-size: $font-size-lg;
	text-align: center;
	border-radius: 50%;
	padding: 0 0.5rem;
}

.fa-width-rem {
	width: 1.25rem;
}

.format .fa-bold:hover,
.format .fa-italic:hover,
.format .fa-quote-right:hover,
.format .fa-link:hover,
.format .fa-image:hover {
	color: $gray;
}


.voting {
	position: relative;
	z-index: 2;
	font-size: $small-font-size;
	font-weight: $font-weight-bold;
	text-align: center;
	word-break: keep-all;
	min-width: 40px;
}

#thread .voting {
	min-width: 15px;
	margin-right: 15px;
	overflow-wrap: normal;
}

#frontpage .voting, #search .voting, #userpage .voting {
	margin: auto 0;
}

.active.arrow-up::before {
	color: $upvote;
}

.arrow-up::before {
	cursor: pointer;
	font-size: $font-size-base;
	color: $gray-400;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	content: "\f357";

}

.arrow-up:hover::before {
	color: $upvote;
	opacity: 0.5;
}

.active.arrow-down::before {
	color: $downvote;
}

.arrow-down::before {
	cursor: pointer;
	font-size: $font-size-base;
	color: $gray-400;
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	content: "\f354";
}

.arrow-down:hover::before {
	color: $downvote;
	opacity: 0.5;
}

/* .upvoted .arrow-up::before {
	color: $upvote;
}

.upvoted .arrow-up:hover::before {
	opacity: 1;
}

.downvoted .arrow-down::before {
	color: $downvote;
}

.downvoted .arrow-down:hover::before {
	opacity: 1;
} */

.comment-actions .arrow-up {
	top: 0;
}

.comment-actions .arrow-down {
	bottom: 0;
}

.upvoted .arrow-mobile-up {
	color: $upvote!important;
}

.downvoted .arrow-mobile-down {
	color: $downvote!important;
}

.comment-actions .score {
	color: $muted;
}

.score {
	color: $black;
}

.score-up {
	color: $upvote !important;
}

.score-down {
	color: $downvote !important;
}

.banned .score, .deleted .score {		
	color: $gray-300 !important;		
}


a .link-arrow {
position: relative;
right: 0;
transition: right ease 0.25s;
margin-left: .5rem;
font-size: $small-font-size;
}

a:hover .link-arrow {
right: -.5rem;
color: $dark;
}


.box-shadow-bottom {
	box-shadow: inset 0 -1px 0 $border-color;
}


.border-1 {
	border-width: 1px;
	border-style: solid;
}

.border-2 {
	border-width: 2px;
	border-style: solid;
}

.border-3 {
	border-width: 3px;
	border-style: solid;
}

.border-4 {
	border-width: 4px;
	border-style: solid;
}

.border-5 {
	border-width: 5px;
	border-style: solid;
}


.opacity-25 {
	opacity: .25;
}

.opacity-50 {
	opacity: .5;
}

.opacity-80 {
	opacity: .8;
}


#frontpage .pseudo-submit-form.card, #search .search-results.card {
	background-color: $white;
	border-radius: $border-radius;
	border: 1px solid $border-color;
}

#frontpage .pseudo-submit-form.card .card-body, #search .search-results.card .card-body {
	padding-left: 15px;
	padding-right: 15px;
}

#frontpage .pseudo-submit-form.card .card-body .form-control {
	background-color: $gray-100;
}

#frontpage .pseudo-submit-form.card .card-body .form-control:hover, #frontpage .pseudo-submit-form.card .card-body .form-control:active, #frontpage .pseudo-submit-form.card .card-body .form-control:focus {
	background-color: $white;
}

.post-filter {
	display: inline-block;
	font-size: $small-font-size;
	font-weight: $font-weight-bold;
	color: $muted;
}

.post-filter .fa, .post-filter .fas {
	font-size: $extra-small-font-size;
	margin-right: .5rem;
	opacity: .9;
	color: $primary;
	width: 1rem;
}

.filter-list .filter-item {
	color: $muted;
	text-decoration: none;
}

.filter-list .filter-link {
	display: block;
	padding: 0.5rem 1rem;
	color: $muted;
	font-size: $small-font-size;
	font-weight: $font-weight-bold;
	margin-bottom: 0.25rem;
	text-decoration: none;
}

.filter-list .filter-link:hover, .filter-list .filter-link:focus {
	color: $black;
}

.filter-list > .filter-item > .filter-link.active {
	color: $black;
	background-color: $white;
	border-radius: $border-radius;
}

.filter-list .filter-item .fa, .filter-list .filter-item .fas, .filter-list .filter-item .far, .filter-list .filter-item .fab, .filter-list .filter-item .fal {
	font-size: $small-font-size;
	margin-right: 0.5rem;
	color: $gray-600;
	text-align: center;
}

.filter-list .filter-link:hover .fa , .filter-list .filter-link:focus .fa, .filter-list .filter-link:hover .fas, .filter-list .filter-link:focus .fas, .filter-list .filter-link:hover .far, .filter-list .filter-link:focus .far, .filter-list .filter-link:hover .fab , .filter-list .filter-link:focus .fab {
	color: $primary;
}

.filter-list > .filter-item > .filter-link.active .fa, .filter-list > .filter-item > .filter-link.active .fas, .filter-list > .filter-item > .filter-link.active .far, .filter-list > .filter-item > .filter-link.active .fab {
	color: $primary;
}

.filter-link:hover, .filter-link:focus {
	color: $primary;
}

.dashboard-list .dashboard-item {
	color: $muted;
	text-decoration: none;
}

.dashboard-list .dashboard-link {
	display: block;
	padding: 0.5rem 0;
	color: $muted;
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	margin-bottom: 0.25rem;
	text-decoration: none;
}

.dashboard-list .dashboard-link:hover, .dashboard-list .dashboard-link:focus {
	color: $black;
}

.dashboard-list > .dashboard-item > .dashboard-link.active {
	color: $primary;
}

.dashboard-list .dashboard-item .fa, .dashboard-list .dashboard-item .fas, .dashboard-list .dashboard-item .far, .dashboard-list .dashboard-item .fab, .dashboard-list .dashboard-item .fal {
	font-size: $small-font-size;
	margin-right: 0.5rem;
	color: $gray-600;
	text-align: center;
}

.dashboard-list .dashboard-link:hover .fa , .dashboard-list .dashboard-link:focus .fa, .dashboard-list .dashboard-link:hover .fas, .dashboard-list .dashboard-link:focus .fas, .dashboard-list .dashboard-link:hover .far, .dashboard-list .dashboard-link:focus .far, .dashboard-list .dashboard-link:hover .fab , .dashboard-list .dashboard-link:focus .fab {
	color: $primary;
}

.dashboard-list > .dashboard-item > .dashboard-link.active .fa, .dashboard-list > .dashboard-item > .dashboard-link.active .fas, .dashboard-list > .dashboard-item > .dashboard-link.active .far, .dashboard-list > .dashboard-item > .dashboard-link.active .fab {
	color: $primary;
}

.dashboard-link:hover, .dashboard-link:focus {
	color: $primary;
}

.list-group-item-action {
	color: rgba(255, 255, 255, 0.5);
}

a.bg-dark:hover, a.bg-dark:focus, button.bg-dark:hover, button.bg-dark:focus {
	background-color: transparent!important;
	color: rgba(255, 255, 255, 0.8);
}

.user-count {
	margin-bottom: .25rem;
}

.online-count {
	margin-bottom: .25rem;
}


.progress {
	border-radius: 50%;
}


.user-name {
	color: inherit;
}

.banner-pic-135 {
	object-fit: cover;
	height: 135px;
	max-width: 572px;
	width: 572px;
}

.profile-pic.transition-square {
	transition: border-radius 0.25s;
}

.profile-pic.profile-pic.transition-square:hover {
	border-radius: .35rem;
}

.profile-pic {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	margin: auto;
	text-align: center;
	object-fit: cover;
	color: $white;
	background-color: #FFFFFF;
}

.profile-pic .letter {
	line-height: 3.6rem;
	font-size: $font-size-lg;
	font-weight: $font-weight-bold;
	text-transform: uppercase;
}

.profile-pic-30 .letter {
	line-height: 1.75;
}

.profile-pic-35 .letter {
	line-height: 2;
}

.profile-pic-75 .letter {
	line-height: 2.75;
	font-size: 2rem;
}

.navbar .navbar-nav .profile-pic {
	display: inline-block;
	width: 28px;
	height: 28px;
}

.navbar .navbar-nav .profile-pic .letter {
	line-height: 2rem;
	font-size: $small-font-size;
}

.profile-pic-20 {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-25 {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-28 {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-30 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-35 {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-40 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-50 {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-65 {
	width: 65px;
	height: 65px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-75 {
	width: 75px;
	height: 75px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: $white;
}

.profile-pic-100 {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	text-align: center;
	object-fit: cover;
	background-color: #FFFFFF;
}

.profile-pic-overlap {
	margin-left: -1rem;
}

.profile-pic-overlap:first-child {
	margin-left: 0;
}

.toggle-view .nav-link {
	color: $gray;
	font-size: $small-font-size;
	font-weight: $font-weight-bold;
	padding: 0;
	line-height: 1;
	box-shadow: none;
	border-radius: 0;
}

.toggle-view .fa, .toggle-view .fas, .toggle-view .far, .toggle-view .fab, .toggle-view .fal {
	font-size: $small-font-size;
	margin-right: .5rem;
	color: $gray-600;
}

.toggle-view .nav-link:hover, .toggle-view .nav-link:focus {
	color: $primary;
}

.toggle-view > .nav-item > .nav-link.active .fa, .toggle-view > .nav-item > .nav-link.active .fas, .toggle-view > .nav-item > .nav-link.active .far, .toggle-view > .nav-item > .nav-link.active .fab {
	color: $primary;
}

.toggle-view .nav-link:hover .fa, .toggle-view .nav-link:focus .fa, .toggle-view .nav-link:hover .fas, .toggle-view .nav-link:focus .fas, .toggle-view .nav-link:hover .far, .toggle-view .nav-link:focus .far, .toggle-view .nav-link:hover .fab , .toggle-view .nav-link:focus .fab {
	color: $primary;
}

.toggle-card-view .posts {
	background: none;
	border-radius: 0;
	box-shadow: none;
	border: none;
}


.card-header:first-child {
	border-radius: $border-radius $border-radius 0 0;
}

.card-header {
	font-size: $font-size-base;
	font-weight: $font-weight-bold;
	color: $gray;
	padding: 0.5rem 1rem;
	border-bottom: 1px solid $input-border-color;
}

#frontpage .posts .card:first-of-type, #userpage .posts .card:first-of-type, #search .posts .card:first-of-type {
	border-top-left-radius: $border-radius;
	border-top-right-radius: $border-radius;
}

#frontpage .posts .card:nth-last-of-type(2), #userpage .posts .card:nth-last-of-type(2), #search .posts .card:nth-last-of-type(2) {
	border-bottom-left-radius: $border-radius;
	border-bottom-right-radius: $border-radius;
	border-bottom: 1px solid $border-color;
}

#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
	border-width: 1px 1px 0 1px;
	border-color: $border-color;
	border-style: solid;
	border-radius: 0;
	padding: 0.5rem;
}

#frontpage .posts .card:hover, #userpage .posts .card:hover, #search .posts .card:hover {
	background-color: $gray-200;
}

.post-title {
	font-size: 16px;
	font-weight: $font-weight-bold;
	word-break: break-word;
	overflow: hidden;
}

.post-title a {
	color: $black;
}

.post-title a:hover, .post-title a:active, .post-title a:focus	{
	text-decoration: none;
	color: $primary;
}

#frontpage .post-title a {
	color: $black;
}

#frontpage .post-title a:hover, #frontpage .post-title a:active, #frontpage .post-title a:focus	{
	text-decoration: none;
	color: $black;
}

.stretched-link a:hover {
	color: $purple
}

.post-meta {
	position: relative;
	z-index: 2;
	color: $muted;
	font-size: $small-font-size;
	width: fit-content;
}

#frontpage .posts .card .card-footer, #userpage .posts .card .card-footer, #thread .card .card-footer, #search .posts .card .card-footer {
	border: 0;
	background-color: transparent;
	padding: 0;
}

.post-body {
	word-break: break-word;
	overflow: hidden;
}


.modal-backdrop.show {
	opacity: 1;
	background-color:rgba(30,30,30,0.9);
}

.modal-header {
	border-bottom: 1px solid $border-color;
	background-color: $white;
	border-top-left-radius: $border-radius;
	border-top-right-radius: $border-radius;
	padding: 0.5rem 1rem;
}

.modal-header .close {
	padding: 1.25rem 1rem 0 1rem;
}

.modal-content {
	border: none;
	border-radius: $border-radius;
	box-shadow: $box-shadow;
}

.modal-footer {
	border: none;
	background-color: $gray-200;
	border-bottom-right-radius: $border-radius;
	border-bottom-left-radius: $border-radius;
}

.modal .post-actions .list-group-item {
	border: none;
	border-radius: $border-radius;
}

.modal .post-actions .list-group-item:focus, .modal .post-actions .list-group-item:hover {
	background-color: $gray-200;
}

.modal .post-actions a {
	color: $black;
	font-size: $font-size-base;
}

.modal .post-actions .fa, .modal .post-actions .fas, .modal .post-actions .far {
	width: 1.25rem;
	font-size: $font-size-base;
}

.post-actions {
	position: relative;
	color: $muted;
	font-weight: $font-weight-bold;
	font-size: $small-font-size;
	z-index: 3;
}

.post-actions .fa, .post-actions .fas, .post-actions .far {
	font-size: $small-font-size;
	margin-right: .5rem;
	width: 1rem;
}

.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
	color: inherit;
}

.post-actions .fa-ellipsis-v {
	font-size: $font-size-lg;
}

.post-actions .dropdown-item:active .fa, .post-actions .dropdown-item:active .fas {
	color: $black;
}

.post-actions .dropdown-item:hover .fa, .post-actions .dropdown-item:hover .fas {
	color: $black;
}

.post-actions a:hover .fa, .post-actions a:hover .fas {
	color: $black;
}

.post-actions:hover, .post-actions:focus {
	z-index: 4;
}

.post-actions .copy-link:hover	{
	color: $black;
}

.post-actions .fas.fa-ellipsis-h, .post-actions .far.fa-ellipsis-h {
	font-size: $font-size-lg;
	vertical-align: middle;
}

.post-actions .removeDropdownItem.dropdown-item:hover, .post-actions .removeDropdownItem.dropdown-item:focus, .post-actions .removeDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $warning;
}

.post-actions .removeDropdownItem.dropdown-item:hover .fas, .post-actions .removeDropdownItem.dropdown-item:focus .fas, .post-actions .removeDropdownItem.dropdown-item.active .fas, .post-actions .removeDropdownItem.dropdown-item:hover .far, .post-actions .removeDropdownItem.dropdown-item:focus .far, .post-actions .removeDropdownItem.dropdown-item.active .far
.post-actions .removeDropdownItem.dropdown-item:hover .fa, .post-actions .removeDropdownItem.dropdown-item:focus .fa, .post-actions .removeDropdownItem.dropdown-item.active .fa {
	color: $white;
}

.post-actions .approveDropdownItem.dropdown-item:hover, .post-actions .approveDropdownItem.dropdown-item:focus, .post-actions .approveDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $success;
}

.post-actions .approveDropdownItem.dropdown-item:hover .fas, .post-actions .approveDropdownItem.dropdown-item:focus .fas, .post-actions .approveDropdownItem.dropdown-item.active .fas, .post-actions .approveDropdownItem.dropdown-item:hover .far, .post-actions .approveDropdownItem.dropdown-item:focus .far, .post-actions .approveDropdownItem.dropdown-item.active .far
.post-actions .approveDropdownItem.dropdown-item:hover .fa, .post-actions .approveDropdownItem.dropdown-item:focus .fa, .post-actions .approveDropdownItem.dropdown-item.active .fa {
	color: $white;
}

.post-actions .list-inline {
	margin-bottom: 0;
}

.post-actions .list-inline .list-inline-item {
	margin-right: 1rem;
}

.post-actions .list-inline .list-inline-item:last-child {
	margin-right: 0;
}

.close .far, .close .fab, .close .fal, .close .fas {
	font-size: 1.25rem;
}

@media (max-width: 767.98px) {
	.modal.modal.modal-sm-bottom .modal-dialog {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1030;
	}

	.modal.modal-sm-bottom .modal-content {
		position: absolute;
		bottom: 0;
		border-radius: 1rem;
	}

	.modal.fade.modal-sm-bottom .modal-dialog {
		transform: translate3d(0, 100vh, 0);
	}

	.modal.show.modal-sm-bottom .modal-dialog {
		transform: translate3d(0, 0, 0);
	}

	.modal.modal-sm-bottom .modal-header {
		border-top-right-radius: 1rem;
		border-top-left-radius: 1rem;
	}
} 


.dropdown-actions {
	position: relative;
	color: $muted;
	font-weight: $font-weight-bold;
	font-size: $small-font-size;
	z-index: 3;
}

.dropdown-actions .fa, .dropdown-actions .fas, .dropdown-actions .far {
	font-size: $small-font-size;
	color: $muted;
	margin-right: .5rem;
	width: 1rem;
	text-align: center;
}

.dropdown-actions .voting .fa, .dropdown-actions .voting .fas, .dropdown-actions .voting .far {
	color: inherit;
}

.dropdown-actions .fa-ellipsis-v {
	font-size: $font-size-lg;
}

.dropdown-actions .dropdown-item:active .fa, .dropdown-actions .dropdown-item:active .fas {
	color: $black;
}

.dropdown-actions .dropdown-item:hover .fa, .dropdown-actions .dropdown-item:hover .fas {
	color: $black;
}

.dropdown-actions a:hover .fa, .dropdown-actions a:hover .fas {
	color: $black;
}

.dropdown-actions:hover, .dropdown-actions:focus {
	z-index: 4;
}

.dropdown-actions .copy-link:hover	{
	color: $black;
}

.dropdown-actions .fas.fa-ellipsis-h, .dropdown-actions .far.fa-ellipsis-h {
	font-size: $font-size-lg;
	vertical-align: middle;
}

.dropdown-actions .removeDropdownItem.dropdown-item:hover, .dropdown-actions .removeDropdownItem.dropdown-item:focus, .dropdown-actions .removeDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $warning;
}

.dropdown-actions .removeDropdownItem.dropdown-item:hover .fas, .dropdown-actions .removeDropdownItem.dropdown-item:focus .fas, .dropdown-actions .removeDropdownItem.dropdown-item.active .fas, .dropdown-actions .removeDropdownItem.dropdown-item:hover .far, .dropdown-actions .removeDropdownItem.dropdown-item:focus .far, .dropdown-actions .removeDropdownItem.dropdown-item.active .far
.dropdown-actions .removeDropdownItem.dropdown-item:hover .fa, .dropdown-actions .removeDropdownItem.dropdown-item:focus .fa, .dropdown-actions .removeDropdownItem.dropdown-item.active .fa {
	color: $white;
}

.dropdown-actions .approveDropdownItem.dropdown-item:hover, .dropdown-actions .approveDropdownItem.dropdown-item:focus, .dropdown-actions .approveDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $success;
}

.dropdown-actions .approveDropdownItem.dropdown-item:hover .fas, .dropdown-actions .approveDropdownItem.dropdown-item:focus .fas, .dropdown-actions .approveDropdownItem.dropdown-item.active .fas, .dropdown-actions .approveDropdownItem.dropdown-item:hover .far, .dropdown-actions .approveDropdownItem.dropdown-item:focus .far, .dropdown-actions .approveDropdownItem.dropdown-item.active .far
.dropdown-actions .approveDropdownItem.dropdown-item:hover .fa, .dropdown-actions .approveDropdownItem.dropdown-item:focus .fa, .dropdown-actions .approveDropdownItem.dropdown-item.active .fa {
	color: $white;
}

.dropdown-actions .list-inline {
	margin-bottom: 0;
}

.dropdown-actions .list-inline .list-inline-item {
	margin-right: 1rem;
}

.dropdown-actions .list-inline .list-inline-item:last-child {
	margin-right: 0;
}


.page-link {
	font-weight: $font-weight-bold;
}

@media (max-width: 767.98px) {
	.post-actions .list-inline .list-inline-item {
	margin-right: 1.5rem;
	margin-top: 5px;
}

.post-actions .list-inline .list-inline-item:last-child {
	margin-right: 0;
}
}

.post-actions .list-inline .list-inline-item .dropdown-item {
	font-size: $font-size-base;
}

.post-actions .list-inline .list-inline-item .dropdown-item:active {
	color: $white;
}

.post-actions a {
	color: $gray;
	text-decoration: none;
	text-transform: none;
}

.post-actions a:hover {
	color: $black;
}

.post-actions .dropdown-item:hover {
	color: $black;
}

.post-img {
	width: 100px;
	height: 70px;
	object-fit: cover;
	border: 1px solid $primary;
	border-radius: $border-radius;
	z-index: 2;
	background-color: $gray-300;
}

.post-img-lg, .mobile-thumb-enlarged {
	display: none;
}

.post-img-overlay {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0px;
	padding: .25rem .5rem;
	text-align: right;
	width: 100%;
	color: $white;
}


.thumb-img-link-overlay {
	display: none;
}

div:hover .thumb-img-link-overlay {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	bottom: 0px;
	padding: 1.5rem;
	text-align: center;
	width: 100%;
	height: 100%;
	color: $white;
	line-height: 2;
	text-transform: uppercase;
	font-size: 11px;
}

.embed-lg {
	display: none;
}

.post-preview-lg {
	display: none;
}

@media (max-width: 767.98px) { 
	.post-img {
		width: 80px;
		height: 60px;
}

.post-img-overlay {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.5);
	padding: .25rem .5rem;
	text-align: right;
	width: 100%;
	color: $white;
}
}

.post-actions .comments, .post-actions .share, .post-actions .save, .post-actions .flag {
	margin-right: .5rem;
	vertical-align: top;

}

.time-stamp, .points {
	color: $muted;
}


.comments-count {
	display: flex;
}

.comments-count .total {
	font-weight: $font-weight-bold;
	font-size: $small-font-size;
	color: $muted;
}

.comment {
	display: flex;
	position: relative;
	margin-top: 2rem;
	word-break: break-word;
	padding-left: 20px;
}

#notifications .comment, #userpage .comment {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

#notifications .comment:last-child, #userpage .comment:last-child {
	margin-bottom: 0;
}

.comment .comment-profile {
	margin: 1rem;
	text-align: center;
}

.comment .comment-body {
	width: 100%;
}

.comment .comment-body .user-info {
	font-size: $small-font-size;
	color: $muted;
	margin-bottom: .25rem;
	margin-top: -0.25rem;
}

.comment .comment-body .user-name {
	color: $black;
}

.comment .comment-body .comment-text {
	margin-bottom: 1rem;
	word-break: break-word;
	color: $black;
	overflow: hidden;
}

.comment .comment-body .comment-image {
	border: 1px solid $primary
}

blockquote {
	border-left: 2px solid $primary;
	color: $primary;
	font-size: $font-size-base;
	font-weight: $font-weight-normal;
	background-color: rgba($primary, 0.15);
	padding: 0.5rem 1rem;
	margin: 0.5rem 0rem 1rem 0.5rem;
}

blockquote > blockquote {
	padding: 0;
	margin: 0;
	border-left: none;
	background-color: transparent;
}

blockquote p {
	margin-bottom: 0;
}


.modal .comment-actions .list-group-item {
	border: none;
	border-radius: $border-radius;
}

.modal .comment-actions .list-group-item:focus, .modal .comment-actions .list-group-item:hover {
	background-color: $gray-200;
}

.modal .comment-actions a {
	color: $black;
	font-size: $font-size-base;
}

.modal .comment-actions .fa, .modal .comment-actions .fas, .modal .comment-actions .far {
	width: 1.25rem;
	font-size: $font-size-base;
}


.comment-section {
	background-color: $gray-100;
}

.comment-actions {
	font-weight: $font-weight-bold;
	font-size: $small-font-size;
	margin-bottom: 0;
}

.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
	font-size: 12px;
	margin-right: .5rem;
	color: $gray-500;
}

.comment-actions .dropdown-item:active .fa, .comment-actions .dropdown-item:active .fas, .comment-actions .dropdown-item:active .far {
	color: $black;
}

.comment-actions .dropdown-item:hover .fa, .comment-actions .dropdown-item:hover .fas, .comment-actions .dropdown-item:hover .far {
	color: $black;
}

.comment-actions a:hover .fa, .comment-actions a:hover .fas, .comment-actions a:hover .far {
	color: $black;
}

.comment-actions .fas.fa-ellipsis-h {
	font-size: $font-size-lg;
	vertical-align: bottom;
}

.comment-actions .list-inline {
	margin-bottom: 0;
}

.comment-actions .list-inline .list-inline-item {
	margin-right: 0.5rem;
}

.comment-actions .list-inline .list-inline-item .dropdown-item {
	font-size: $small-font-size;
}

.comment-actions .list-inline .list-inline-item .dropdown-item:active {
	color: $black;
}

.comment-actions a {
	color: $gray;
	text-decoration: none;
}

.comment-actions a:hover, .comment-actions .copy-link:hover	{
	color: $black;
}

.comment-actions .dropdown-item:hover {
	color: $black;
}

.comment-actions .removeDropdownItem.dropdown-item:hover, .comment-actions .removeDropdownItem.dropdown-item:focus, .comment-actions .removeDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $warning;
}

.comment-actions .removeDropdownItem.dropdown-item:hover .fas, .comment-actions .removeDropdownItem.dropdown-item:focus .fas, .comment-actions .removeDropdownItem.dropdown-item.active .fas, .comment-actions .removeDropdownItem.dropdown-item:hover .far, .comment-actions .removeDropdownItem.dropdown-item:focus .far, .comment-actions .removeDropdownItem.dropdown-item.active .far
.comment-actions .removeDropdownItem.dropdown-item:hover .fa, .comment-actions .removeDropdownItem.dropdown-item:focus .fa, .comment-actions .removeDropdownItem.dropdown-item.active .fa {
	color: $white;
}

.comment-actions .approveDropdownItem.dropdown-item:hover, .comment-actions .approveDropdownItem.dropdown-item:focus, .comment-actions .approveDropdownItem.dropdown-item.active {
	color: $white;
	text-decoration: none;
	background-color: $success;
}

.comment-actions .approveDropdownItem.dropdown-item:hover .fas, .comment-actions .approveDropdownItem.dropdown-item:focus .fas, .comment-actions .approveDropdownItem.dropdown-item.active .fas, .comment-actions .approveDropdownItem.dropdown-item:hover .far, .comment-actions .approveDropdownItem.dropdown-item:focus .far, .comment-actions .approveDropdownItem.dropdown-item.active .far
.comment-actions .approveDropdownItem.dropdown-item:hover .fa, .comment-actions .approveDropdownItem.dropdown-item:focus .fa, .comment-actions .approveDropdownItem.dropdown-item.active .fa {
	color: $white;
}

ul.comment-section {
	padding-left: 0;
	margin-bottom: 0;
}

.comment-count {
	font-size: $h5-font-size;
	color: $black;
}

.comment-write {
	position: relative;
}

.comment-write.child {
	margin-top: 1rem;
}

.comment-write.collapsed textarea:focus, .comment-write.collapsed textarea:active {
	background-color: $white;
}

.comment-write.collapsed textarea {
	width: 100%;
	box-sizing: border-box;
	padding: .5rem .75rem;
	min-height: 84px;
}

.comment-write textarea {
	background: $white;
}

.comment-format {
	display: flex;
	align-items: center;
	bottom: 0;
	left: 0;
	padding: 0.5rem 0;
	width: 100%;
	z-index: 3;
}

.comment-write .comment-format .format {
	padding: 0 .5rem;
	font-size: $font-size-base;
	color: $gray-500;
}

.comment-write .comment-format .format:hover {
	color: $muted;
}

.comment .comment-collapse::before {
	content: "";
	position: absolute;
	font-family: "Font Awesome 5 Pro";
	border-left: 2px solid $gray-400;
	font-size: $font-size-base;
	color: $primary;
	display: inline-block;
	height: 100%;
	cursor: pointer;
	width: 10px;
}

.comment .comment-collapse:hover::before {
	border-left-color: $primary;
}

.comment.collapsed .comment-collapse::before {
	content: "\f055";
	font-family: "Font Awesome 5 Pro";
	font-weight: 900;
	border-left: none;
	color: $gray-500;
	top: -1px;
	left: -3px;
	font-size: 10px;
}

.comment.collapsed .comment-collapse:hover::before {
	color: $primary;
}

.comment.collapsed .comment-profile, .comment.collapsed .comment-body p.text, .comment.collapsed div.comment-text, .comment.collapsed .comment-actions, .comment.collapsed .comment-write,
.comment.collapsed .comment {
	display: none;
}

.comment.collapsed .user-info {
	margin-bottom: 0;
}

.comment.collapsed .profile-pic-25 {
	opacity: .5;
}

.comment.collapsed .comment-body {
	opacity: .5;
}

.comment.collapsed .comment-body:hover {
	opacity: 1;
}

.dropdown-menu.user-profile-menu {
	padding: 1rem;
	text-align: left;
}

.dropdown-menu.user-profile-menu .fa, .dropdown-menu.user-profile-menu .far, .dropdown-menu.user-profile-menu .fas {
	text-align: center;
	width: 18px;
	padding-right: .25rem;
}


.reactions-count {
	margin-bottom: 3rem;
}

.reactions-count .total {
	font-weight: $font-weight-bold;
	margin-bottom: .5rem;
}

.reaction {
	border: 1px solid $gray-300;
	background-color: $white;
	padding: 0.25rem 0.5rem;
	border-radius: .35rem;
	font-weight: $font-weight-bold;
	margin-right: .25rem;
}

.reaction:hover {
	background-color: $gray-200;
}

.reaction .count {
	margin-left: .5rem;
}

.reaction .reacted {
	border-color: $purple;
	background-color: rgba(60, 173, 243, 0.08);
	color: $purple
}


#login {
	padding-top: 0;
	height: 100%;
	overflow: hidden;
	background-color: $white;
}

.splash-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	font-size: 0;
}

.splash-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(127, 127, 127, 0.25);
	background-image: linear-gradient(135deg, rgba(30, 30, 36, 0.1) 0%, rgba(99, 80, 205, 0.75) 76%);

}

.splash-img {
	height: 100%;
	width: 100%;
	background-size: cover;
	background-position: bottom;
	object-fit: cover;
}

.splash-text {
	position: absolute;
	bottom: 0;
	left: 1.5rem;
	color: $white;
	font-weight: $font-weight-normal;
}


.pagination {
	padding: 1rem 0;
}


.table .thead-dark th {
	color: $muted;
	font-size: $small-font-size;
	text-transform: uppercase;
	background-color: $light;
	border: none;
}


.settings .settings-section {
	margin-bottom: 3rem;
	background: $white;
	border: 1px solid $border-color;
	border-radius: 0.35rem;
	overflow: hidden;
}

.settings .settings-section .title, .settings .settings-section .body, .settings .settings-section .footer {
	padding: 1rem;
}

.settings .settings-section .title p:last-of-type {
	margin-bottom: 0;
}

.settings .settings-section .footer {
	background-color: $gray-200;
}


.modal .profile-actions .list-group-item {
	border: none;
	border-radius: $border-radius;
}

.modal .profile-actions .list-group-item:focus, .modal .profile-actions .list-group-item:hover {
	background-color: $gray-200;
}

.modal .profile-actions a {
	color: $black;
	font-size: $font-size-base;
}

.modal .profile-actions .fa, .modal .profile-actions .fas, .modal .profile-actions .far {
	width: 1.25rem;
	font-size: $font-size-base;
}


.profile-actions a {
	color: $gray;
	text-decoration: none;
	font-size: $small-font-size;
}

.profile-actions .fa, .profile-actions .fas, .profile-actions .far {
	font-size: $small-font-size;
	color: $gray-600;
}

.profile-actions .dropdown-item:hover {
	color: $black;
}

.profile-actions .dropdown-item {
	font-size: 13px;
}

.profile-actions .dropdown .dropdown-menu .dropdown-item .fa, .profile-actions .dropdown .dropdown-menu .dropdown-item .fas, .profile-actions .dropdown .dropdown-menu .dropdown-item .far {
	font-size: $small-font-size;
	color: $gray-600;
	width: 1rem;
	margin-right: 0.5rem;
	text-align: center;
}

.profile-actions .dropdown-item:active .fa, .profile-actions .dropdown-item:active .fas, .profile-actions .dropdown-item:active .far {
	color: $black;
}

.profile-actions .dropdown-item:hover .fa, .profile-actions .dropdown-item:hover .fas, .profile-actions .dropdown-item:active .far {
	color: $black;
}


#page .footer h1, #page .footer h2, #page .footer h3, #page .footer h4, #page .footer h5, #page .footer h6,
#article .footer h1, #article .footer h2, #article .footer h3, #article .footer h4, #article .footer h5, #article .footer h6 {
	font-weight: $font-weight-bold;
}

#page .footer a, #article .footer a {
	color: $white;
	opacity: .8;
}

#page .footer li, #article .footer li {
	padding: .25rem 0;
}

.footer .list-inline-item {
	font-weight: $font-weight-normal;
}

.footer a {
	text-decoration: none;
	color: $muted;
}

.footer a:hover, .footer a:focus, .footer a:active {
	text-decoration: underline;
}

.footer.footer-dark a:hover, .footer.footer-dark a:focus, .footer.footer-dark a:active {
	color: $white;
}


.empty-state-img {
	width: 200px;
	opacity: .35;
	filter: brightness(0);
}


.ghost {
	-webkit-animation: ghost 2s infinite	alternate;
	animation: ghost 2s infinite	alternate;
};
@-webkit-keyframes ghost {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
};
@keyframes ghost {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
};
@-moz-keyframes ghost {
	0% { transform: translateY(0); }
	100% { transform: translateY(-20px); }
};


@each $breakpoint in map-keys($grid-breakpoints) {
	@include media-breakpoint-up($breakpoint) {
	$infix: breakpoint-infix($breakpoint, $grid-breakpoints);

	.border#{$infix}-top {		border-top: $border-width solid $border-color !important; }
	.border#{$infix}-right {	border-right: $border-width solid $border-color !important; }
	.border#{$infix}-bottom {	 border-bottom: $border-width solid $border-color !important; }
	.border#{$infix}-left {	 border-left: $border-width solid $border-color !important; }

	.border#{$infix}-top-0 {	border-top: 0 !important; }
	.border#{$infix}-right-0 {	border-right: 0 !important; }
	.border#{$infix}-bottom-0 { border-bottom: 0 !important; }
	.border#{$infix}-left-0 {	 border-left: 0 !important; }

	.border#{$infix}-x {
		border-left: $border-width solid $border-color !important;
		border-right: $border-width solid $border-color !important;
	}

	.border#{$infix}-y {
		border-top: $border-width solid $border-color !important;
		border-bottom: $border-width solid $border-color !important;
	}

	.border#{$infix} {
		border: $border-width solid $border-color !important;
	}

	.border#{$infix}-0 {
		border: none !important;
	}

 
	.rounded#{$infix}		{ @include border-radius($border-radius); }
	.rounded#{$infix}-top	{ @include border-top-radius($border-radius); @include border-bottom-radius(0); }
	.rounded#{$infix}-right	{ @include border-right-radius($border-radius); @include border-left-radius(0); }
	.rounded#{$infix}-bottom { @include border-bottom-radius($border-radius); @include border-top-radius(0); }
	.rounded#{$infix}-left	 { @include border-left-radius($border-radius); @include border-right-radius(0); }
	.rounded#{$infix}-circle { border-radius: 50%; }
	.rounded#{$infix}-0 {	border-radius: 0;	}

	}
}


@media (min-width: 768px) {
	.shadow-md {
		box-shadow: $box-shadow;
	}
	}


@media (min-width: 576px) {
	.w-sm-25 {
		width: 25% !important;
	}
	.w-sm-50 {
		width: 50% !important;
	}
	.w-sm-75 {
		width: 75% !important;
	}
	.w-sm-100 {
		width: 100% !important;
	}
	.w-sm-auto {
		width: auto !important;
	}
	.h-sm-25 {
		height: 25% !important;
	}
	.h-sm-50 {
		height: 50% !important;
	}
	.h-sm-75 {
		height: 75% !important;
	}
	.h-sm-100 {
		height: 100% !important;
	}
	.h-sm-auto {
		height: auto !important;
	}
	}
	@media (min-width: 768px) {
	.w-md-25 {
		width: 25% !important;
	}
	.w-md-50 {
		width: 50% !important;
	}
	.w-md-75 {
		width: 75% !important;
	}
	.w-md-100 {
		width: 100% !important;
	}
	.w-md-auto {
		width: auto !important;
	}
	.h-md-25 {
		height: 25% !important;
	}
	.h-md-50 {
		height: 50% !important;
	}
	.h-md-75 {
		height: 75% !important;
	}
	.h-md-100 {
		height: 100% !important;
	}
	.h-md-auto {
		height: auto !important;
	}
	}
	@media (min-width: 992px) {
	.w-lg-25 {
		width: 25% !important;
	}
	.w-lg-50 {
		width: 50% !important;
	}
	.w-lg-75 {
		width: 75% !important;
	}
	.w-lg-100 {
		width: 100% !important;
	}
	.w-lg-auto {
		width: auto !important;
	}
	.h-lg-25 {
		height: 25% !important;
	}
	.h-lg-50 {
		height: 50% !important;
	}
	.h-lg-75 {
		height: 75% !important;
	}
	.h-lg-100 {
		height: 100% !important;
	}
	.h-lg-auto {
		height: auto !important;
	}
	}
	@media (min-width: 1200px) {
	.w-xl-25 {
		width: 25% !important;
	}
	.w-xl-50 {
		width: 50% !important;
	}
	.w-xl-75 {
		width: 75% !important;
	}
	.w-xl-100 {
		width: 100% !important;
	}
	.w-xl-auto {
		width: auto !important;
	}
	.h-xl-25 {
		height: 25% !important;
	}
	.h-xl-50 {
		height: 50% !important;
	}
	.h-xl-75 {
		height: 75% !important;
	}
	.h-xl-100 {
		height: 100% !important;
	}
	.h-xl-auto {
		height: auto !important;
	}
	}


.text-format {
	display: flex;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	padding: .5rem;
	width: 100%;
	border-width: 0 1px 1px 1px;
	border-style: solid;
	border-color: $gray-300;
	border-bottom-left-radius: .25rem;
	border-bottom-right-radius: .25rem;
	z-index: 3;
}

.text-format .format {
	padding: 0 0.5rem;
	font-size: 1rem;
	color: #adb5bd;
}

.submission .body {
	padding: 1rem;
}

.submission .footer {
	background-color: $gray-200;
	padding: 1rem;
	border-bottom-left-radius: .25rem;
	border-bottom-right-radius: .25rem;
}


.transition-15 {
	-webkit-transition: width .15s;
	transition: width .15s;
}


.custom-control-label {
	text-transform: none;
	font-weight: $font-weight-normal;
	font-size: $font-size-base;
	letter-spacing: 0;
	color: $black;
}

.custom-checkbox .custom-control-input:checked~.custom-control-label::before {
	background-color: $purple;
	border: 1px solid $purple;
}


.custom-switch {
	padding-left: 2.25rem;
	padding-bottom: 1rem; }

.custom-switch .custom-control-label { 	padding-top: 0.5rem;
	padding-left: 2rem;
	padding-bottom: 0.1rem;
}

.custom-control-input:checked ~ .custom-control-label::before {
	opacity: 1;
	background-color: $success;
	border: $success solid 1px;

}

.custom-control-input:checked ~ .custom-control-label:hover::before {
	opacity: 1;
}

.custom-switch .custom-control-label::before {
	left: -2.25rem;
	height: 1.5rem;
	width: 2.75rem;		pointer-events: all;
	border-radius: 1rem;
	background-color: $gray-500;
	border: $gray-500 solid 1px;
	opacity: .7;
}

.custom-switch .custom-control-label:hover::before {
	opacity: .85;
}

.custom-switch .custom-control-label::after {
	top: calc(0.25rem + 2px);
	left: calc(-2.25rem + 2px);
	width: calc(1.5rem - 4px);	 	height: calc(1.5rem - 4px);		background-color: $white;
	border-radius: 2rem; //	 it was 0.5rem before. Oval is bigger than before.
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-transform 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
	.custom-switch .custom-control-label::after {
	transition: none;
	}
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
	background-color: #fff;
	-webkit-transform: translateX(1.25rem); //translateX(0.75rem);
	transform: translateX(1.25rem); //translateX(0.75rem);
}


pre code {
	word-break: break-word;
	white-space: break-spaces;
	color: $code;
}


pre.prettyprint {
	padding: 0;
}

pre ol.linenums {
	padding-left: 0;
}

pre ol > li {
	margin-bottom: 0;
}

pre ol > li::before {
	color: $white;
	font-weight: $font-weight-normal;
	background-color: transparent;
	right: 1rem;
	padding: .25rem;
	text-align: right;
	margin-right: 0.5rem;
	width: 3rem;
}

pre li.L1, pre li.L3, pre li.L5, pre li.L7, pre li.L9 {
	background: none;
}

pre .pln, code .pln {
	color: #29b1f3;
}

pre .lit, code .lit {
	color: #d55a7c;
}

pre .kwd, code .kwd {
	color: $green;
}

pre .str, code .str {
	color: $green;
	opacity: .75;
}

pre .com, code .com {
	color: #ab4bc3;
}

pre .typ, code .typ {
	color: $white;
}

pre .clo, pre .opn, pre .pun, code .clo, code .opn, code .pun {
	color: #fff;
}


.gif-categories .card {
	overflow: hidden;
	border: none;
}

.gif-categories img {
	border-radius: $border-radius;
	height: 110px;
	width: 100%;
	object-fit: cover;
	-webkit-transition:	all .15s ease;
	-moz-transition:	all .15s ease;
	-o-transition:	all .15s ease;
	-ms-transition: all .15s ease;
	transition: all .15s ease;
}

.gif-categories img:hover {
	border: 3px solid $primary;
}

.gif-categories .card .gif-cat-overlay {
	position: absolute;
	text-align: center;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	-webkit-transition:	all .15s ease;
	-moz-transition:	all .15s ease;
	-o-transition:	all .15s ease;
	-ms-transition: all .15s ease;
	transition: all .15s ease;
}

.gif-categories .card:hover .gif-cat-overlay {
	background-color: rgba(0, 0, 0, 0.6);
	border: 3px solid $primary;
	border-radius: $border-radius;
}


@media (max-width: 991.98px) {
	#frontpage, #search {
		padding-top: 49px;
	}
}

@media (max-width: 767.98px) {

html {
	font-size: 14px;
}

.container {
	overflow: hidden;
	max-width: none;
}

body, #settings, #notifications, #submit{
	padding-top: 49px;
	background-color: $white;
}

#thread, #userpage {
	background-color: $white;
}

.custom-gutters {
	padding-left: 0;
	padding-right: 0;
}

.shadow-sm-0 {
	box-shadow: none!important;
}

.navbar-nav {
	height: 100vh;
}

.navbar-nav .nav-link, .navbar-expand-md .navbar-nav .nav-link {
	padding: 0.5rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
	background-color: transparent;
	border-radius: 0;
}

.navbar-dark .navbar-nav .nav-link:active {
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 0;
}

.navbar-dark .navbar-nav .nav-link .fa, .navbar-dark .navbar-nav .nav-link .fas, .navbar-dark .navbar-nav .nav-link .far, .navbar-dark .navbar-nav .nav-link .fab {
	font-size: $font-size-base;
}

.navbar-light .navbar-nav .nav-link .fa, .navbar-light .navbar-nav .nav-link .fas, .navbar-light .navbar-nav .nav-link .far, .navbar-light .navbar-nav .nav-link .fab {
	color: $purple;
	font-size: $font-size-lg;
}

#fixed-bar-mobile {
	box-shadow: $box-shadow;
}

.mobile-nav-icon {
	padding: 0.25rem 0.75rem;
}

#search .search-results.card	{
	border-bottom: 1px solid #e3e3e3;
	border-width: 0 0 1px 0;
	border-radius: 0;
}

#frontpage .posts .card, #userpage .posts .card, #search .posts .card {
	padding: 7px 15px;
	border-width: 0 0 1px 0;
}

#frontpage .posts .card:first-of-type, #userpage .posts .card:first-of-type, #search .posts .card:first-of-type {
	border-radius: 0;
}

#frontpage .posts .card:nth-last-of-type(2), #search .posts .card:nth-last-of-type(2) {
	border-bottom: 1px solid $border-color;
}

#frontpage .posts .card:hover, #search .posts .card:hover {
	background-color: transparent;
}

#frontpage .posts .card .post-img, #search .posts .card .post-img {
	z-index: 3;
}

#frontpage .posts .card.enlarged .mobile-thumb-enlarged, #userpage .posts .card.enlarged .mobile-thumb-enlarged, #search .posts .card.enlarged .mobile-thumb-enlarged {
	display: block;
}

.toggle-view {
	padding-top: 2px;
}


.toast {
	bottom: 1.5rem;
	margin: 0 auto;
	left: 0;
	right: 0;
}

/*

#frontpage.toggle-card-view .posts .card, #userpage.toggle-card-view .posts .card, #search.toggle-card-view .posts .card {
	border-width: 0 0 1px 0;
	border-color: $border-color;
	border-style: solid;
	border-radius: 0;
	margin-top: 0;
	box-shadow: none;
}

#frontpage.toggle-card-view .posts .card .post-img-lg img, #userpage.toggle-card-view .posts .card .post-img-lg img, #search.toggle-card-view .posts .card .post-img-lg img { 
	max-width: 100%;
	height: auto;
}

*/


.posts, #thread #main-content-col {
	box-shadow: none;
	border-radius: 0;
	border: none;
}

#thread #main-content-col {
	margin: 0;
}

.thumb-img-link-overlay {
	display: none;
}

.post-title a {
	color: $black;
}

.post-title a:hover, .post-title a:active, .post-title a:focus {
	color: $primary;
}

#thread .voting {
	min-width: 0;
	margin-right: 0;
	margin-top: 0;
}

.voting {
	font-weight: $font-weight-normal;
	font-size: 1.2rem;
}

#frontpage .voting, #search .voting, #userpage .voting {
	margin: 0;
}

.post-title {
	font-size: 14px;
	font-weight: $font-weight-normal;
	line-height: normal;
	overflow: hidden;
}

.post-meta {
	font-size: 1rem;
	color: $gray-600;
}

.post-actions {
	color: $gray-500;
	font-weight: $font-weight-normal;
}

.post-actions a {
	color: $gray-500;
	font-size: $font-size-base;
	font-weight: $font-weight-normal;
}

.post-actions .fa, .post-actions .fas, .post-actions .far {
	font-size: $font-size-base;
	color: $gray-400;
}

.post-actions .voting .fa, .post-actions .voting .fas, .post-actions .voting .far {
	font-size: $font-size-lg;
}


.comment-actions .score {
	color: $muted;
}

.score {
	color: $muted;
}

.arrow-up::before, .arrow-down::before, .arrow-up:hover::before, .arrow-down:hover::before {
	font-size: 1.5rem;
	color: $gray-400;
	opacity: 1;
}

.active.arrow-up::before, .active.arrow-up:hover::before {
	color: $upvote;
}

.active.arrow-down::before, .active.arrow-down:hover::before {
	color: $downvote;
}

.dropdown-actions a {
	font-size: $font-size-base;
}

.dropdown-actions .fa, .dropdown-actions .fas, .dropdown-actions .far {
	font-size: $font-size-base;
	color: $gray-400;
}

.btn-tag {
	font-size: $small-font-size;
}


.comment-section {
	background-color: $white;
}

.comment-write textarea {
	background-color: $gray-100;
}

.comment-section > .comment {
	padding-left: 20px;
	}

.comment {
	margin-top: 1.5rem;
}

.comment .comment-collapse {
	padding-right: 15px;
}

.comment.collapsed .user-info {
	padding-top: 0.5rem;
}

.comment .comment-collapse::before {
	content: "\f056";
	position: static;
	font-size: 10px;
	font-weight: 900;
	border: none;
	margin-left: 0.25rem;
}

.comment.collapsed .comment-body:hover {
	opacity: 0.5;
}

.comment-actions .fa, .comment-actions .fas, .comment-actions .far {
	color: $gray-400;
}


.banner-pic-135 {
	max-width: 100%
}


.x-scroll-parent {
	overflow: hidden;
}

.x-scroll {
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;	/* IE 10+ */
}

.x-scroll::-webkit-scrollbar {
	width: 100%;
	overflow-x: scroll;
	white-space: nowrap;
	background: transparent; /* Chrome/Safari/Webkit */
}

#thread .post-title {
	font-size: 16px;
}

#submit .submission {
	box-shadow: none;
}

#submit .submission .body {
	padding: 0;
}

#submit .submission .footer {
	background: transparent;
	padding: 1rem 0;
}

.footer .list-inline-item {
	line-height: 3;
}

.comments-count .total {
	font-weight: $font-weight-normal;
	font-size: $font-size-base;
}

.comment-actions {
	font-weight: $font-weight-normal;
	font-size: 1.2rem;
}

.comment-write .comment-format .format {
	display: none;
}

.post-filter {
	font-weight: $font-weight-normal;
	font-size: $font-size-base;
}

.post-filter .dropdown-item {
	font-weight: $font-weight-normal;
}

.user-name {
	font-weight: $font-weight-normal;
}

.comment .comment-body .user-name {
	color: $black;
	font-weight: $font-weight-bold;
}

.pagination {
	padding: 1rem;
}

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
	font-size: 16px!important;
}

textarea, input[type=text] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

}


.hide-scrollbar::-webkit-scrollbar {
	width: 0px;
	background: transparent;
}


.hide-scrollbar {
	scrollbar-width: none;
}

.noshow {
	display: none;
}

span.red {
	color: $admin;
}

span.green {
	color: $green;
}

div.banned {
	background-color: $banned;
}		

div.deleted {
	background-color: $deleted;
}	
div.deleted.banned {
	background-color: $deletedandbanned
}
.distinguish-admin .user-name, .distinguish-mod	 .user-name {		
	color: white;		
	padding: 0px 3px 2px 3px;		
	border-radius: 3px;		
}		
.distinguish-admin .user-name {		
	background-color: $admin;		
}		
.distinguish-mod .user-name {		
	background-color: $mod;		
}		
.distinguish-admin .user-name::before {		
 content: "[A] "		
}		
.distinguish-mod .user-name::before {		
 content: "[M] "		
}

.object-cover {
	object-fit: cover;
}

.cat-item {
	display: none;
	&.selected {
		display: block;
	}
}

img.emoji {
	width: 30px;
	height: 30px;
	object-fit: contain;
}

/* Light mode spoiler */
.spoiler { 
	color: $black; 
	background-color: $black;
	font-weight: 600 !important;
	padding: 5px;
}

.spoiler:hover { 
	color: $white; 
}

@media (min-width: 768px) {
	.comment {
		border-left: 0 !important;
		padding-left: 0 !important;
	}
}

.comment .comment-collapse-desktop {
	padding-right: 20px;
	cursor: pointer;
	}
.comment .comment-collapse-desktop:hover {
	border-left-color: $gray !important; }

.comment.collapsed .comment-collapse-desktop:hover {
	color: $gray !important; }
#frontpage .post-title a:visited {
	color: $gray;
}

@media (max-width: 767.98px) {
	.settings-nav .nav-link {
		font-size: $medium-font-size;
		padding: 0.75rem 0.4rem;}
}

.comment-box {
    border: 2px solid $gray-200;
}

.transparent {
	background: None !important;
}

.jumbotron-guild {
	position: relative;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 0;
	padding: 0;
	display: flex;
	align-items: center;
	z-index: 1

}

.jumbotron-guild .jumbotron-overlay {
	background-color: transparent;
	background-image: linear-gradient(180deg, #fff0 0%, rgba(0, 0, 0, 0.8) 50%);
	position: absolute;
	width: 100%;
	height: 100%;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

@media (max-width: 767.98px) {
	.jumbotron-guild {
		height: 110px;
	}
}

.patron {
    padding: 2px 5px 3px 5px !important;
    border-radius: 5px !important;
	color: white !important;
}