conreq/core/base/static/css/main.css
:root {
	/* Globals */
	--body-bg: linear-gradient(
		145deg,
		rgba(18, 23, 25, 0.8),
		rgba(18, 23, 25, 0.25),
		rgba(18, 23, 25, 0.15),
		rgba(0, 0, 0, 0)
	);
	--large-card-bg: linear-gradient(90deg, #2a2a2a, hsl(0deg 0% 22%));
	--global-font: "Roboto", sans-serif;
	--primary-font-size: 14px;
	--secondary-font-size: 12px;
	--box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
		0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
	--accent-color: #258a6d;
	--placeholder-bg: var(--poster-bg-color);
	/* Sidebar */
	--sidebar-bg: rgb(30 31 30 / 30%);
	--sidebar-width: 240px;
	--navgroup-padding: 23px 20px 10px 20px;
	--navpages-btn-padding: 13px 15px;
	/* Navbar */
	--navbar-bg: rgba(255, 255, 255, 0.04);
	--navbar-height: 0px;
	--searchbar-width: 45%;
	/* Viewport */
	--viewport-padding: 30px;
	--viewport-total-padding: calc(var(--viewport-padding) * 2);
	--viewport-left: var(--sidebar-width);
	/* Posters */
	--poster-bg-color: #191919;
	--poster-width: 150px;
	--poster-height: calc(var(--poster-width) * 1.5);
	--poster-container-height: calc(var(--poster-width) * 2.1);
	--poster-details-height: calc(
		var(--poster-container-height) - var(--poster-height)
	);
	--poster-padding: 10px;
	--poster-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24),
		0 0 2px rgba(0, 0, 0, 0.12);
	/* Poster Indicators */
	--tv-color: #0076a3;
	--tv-indicator-hr: 2px solid var(--tv-color);
	--movie-color: #b66707;
	--movie-indicator-hr: 2px solid var(--movie-color);
}

/* Generic rules */

html {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	height: 100%;
	overflow: hidden;
	font-family: var(--global-font);
	scroll-behavior: smooth;
	background: #363636;
}

body {
	background: var(--body-bg);
	margin: 0px;
	padding: 0px;
	overflow-y: scroll;
	box-sizing: content-box;
	position: relative;
	line-height: 1;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

a {
	color: unset;
	transition: 0.3s ease color;
	text-decoration: none;
}

a:hover {
	color: #fff;
	text-decoration: initial;
}

:focus {
	outline: none;
}

.empty-viewport > div {
	line-height: 2;
}

.bold {
	font-weight: 700;
}

.red {
	background-color: #ff0000;
}

.green {
	background-color: #39b54a;
}

.yellow {
	background-color: #ffff00;
}

.inline-block {
	display: inline-block;
}

.inline {
	display: inline;
}

.light {
	font-weight: 300;
}

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

.no-highlighting {
	/* iOS Safari */
	-webkit-touch-callout: none;
	/* Konqueror HTML */
	-webkit-user-select: none;
	/* Old versions of Firefox */
	-moz-user-select: none;
	/* Internet Explorer/Edge */
	-ms-user-select: none;
	/* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	user-select: none;
}

.clickable {
	cursor: pointer;
}

.line-clamp-1 {
	display: block;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	text-overflow: ellipsis;
	overflow: hidden;
}

.opacity-1 {
	opacity: 1 !important;
}

.spinner-border {
	z-index: 999;
	margin: auto;
	color: var(--accent-color);
}

/* Text input boxes */

.pretty.p-switch.p-fill input:checked ~ .state:before {
	border-color: var(--accent-color);
	background-color: var(--accent-color) !important;
}

::-webkit-input-placeholder {
	opacity: 0.75;
}

::-moz-placeholder {
	opacity: 0.75;
}

:-ms-input-placeholder {
	opacity: 0.75;
}

::-ms-input-placeholder {
	opacity: 0.75;
}

::placeholder {
	opacity: 0.75;
}

.text-input {
	display: block;
	border: none;
	outline: none !important;
	color: rgb(255 255 255 / 0.65);
	padding: 10px;
	font-size: var(--primary-font-size);
	font-family: var(--global-font);
	transition: background 0.3s ease, color 0.3s ease;
	border-radius: 4px;
	font-weight: 300;
}

.text-input:focus {
	background: #fff;
	color: #252525;
}

.text-input-container {
	background: rgb(255 255 255 / 0.08);
	border-radius: 4px;
	transition: background 0.4s ease, color 0.4s ease;
	color: rgb(255 255 255 / 0.75);
	overflow: hidden;
	height: 35px;
}

.text-input-container:focus-within {
	background: #fff;
	color: #252525;
}

.modal .text-input-container {
	background: rgb(255 255 255 / 0.08);
	color: rgb(255 255 255 / 0.75);
}

.modal .text-input-container:focus-within {
	background: #fff;
	color: #252525;
}

.text-input-container.error {
	background: rgb(255 0 0 / 28%);
}

.text-input-container.dropdown {
	overflow: visible;
}

.text-input-container input {
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	background: none;
	color: inherit;
	border: none;
	font-size: var(--primary-font-size);
	padding-left: 15px;
	padding-right: 15px;
	outline: none !important;
}

/* Images */

img.lazy {
	opacity: 0;
}

img.lazy.initial,
img.lazy.loaded,
img.lazy.error {
	opacity: 1;
}

img.lazy:not([src]) {
	visibility: hidden;
}

.mfp-bg {
	z-index: 1061;
}

.mfp-wrap {
	z-index: 1062;
}

/* Scrollbar */

.simplebar-scrollbar::before {
	background-color: var(--accent-color);
}

::-webkit-scrollbar {
	width: 7px;
	height: 7px;
	background: transparent;
}

.sidebar::-webkit-scrollbar {
	display: none;
}

::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background: rgb(65 146 123 / 0.6);
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
	display: none;
}

/* Hide scrollbars for non-webkit browsers */

html * {
	/* IE 11 */
	-ms-overflow-style: none;
	/* Firefox 64 */
	scrollbar-width: none;
}
