@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Roboto';
	src: url('/fonts/Roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}


@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-Light.ttf') format('truetype');
	font-weight: 300;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-Regular.ttf') format('truetype');
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-Medium.ttf') format('truetype');
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: 'Open Sans';
	src: url('/fonts/OpenSans/OpenSans-ExtraBold.ttf') format('truetype');
	font-weight: 800;
	font-display: swap;
}

@font-face {
	font-family: 'Caveat';
	src: url('/fonts/Caveat/Caveat-VariableFont_wght.ttf') format('truetype');
	font-display: swap;
}

@font-face {
	font-family: 'Architects Daughter';
	src: url('/fonts/ArchitectsDaughter/ArchitectsDaughter-Regular.ttf') format('truetype');
	font-display: swap;
	font-weight: 400;
}

:root {
	--header-height: 48px;
	--max-width: 1600px;
	--page-height: 100vh;
	--page-height: 100dvh;
	--bottom-bar: 50px;
	--toolbar: 32px;
	--item-content-max-height: 180px;
}

html {
	height: 100vh;
	height: 100dvh;
}

body {
	font-family: 'Open Sans';
	font-size: .875rem;
	height: 100%;	
}

main {

}

.main-container {
	max-width: var(--max-width);
}

.header {
	font-size: 1em;
}

footer {
	font-size: 12px;
}

footer small {
	font-size: 10px;
}

.header .btn {
	font-size: 1em;
}

.dropdown {
	z-index: 1030;
}

.hidden {
	visibility:hidden;
}

.navbar {
	padding-top: 2px;
	padding-bottom: 3px;
}

.field-validation-error {
	font-size: 13px;
}

.text-muted.small {
	font-size: 11px;
}

.logo-text {
	font-family: Caveat;
	font-weight: 800;
	font-size: 22px;
	text-decoration: none;	
	padding-left: 0.4rem;
	padding-right: 1rem;
}

.logo-main {
	width: 50px;
}

.logo-main-text {
	font-family: Caveat;
	font-weight: 800;
	font-size: 40px;
	color: white;
	text-decoration: none;
}


.nav-link.active {
	font-weight: bold;
}


.form-control:focus {
	border-color: rgba(var(--bs-secondary-rgb),0.1);
	box-shadow: 0 0 0 0.1rem rgba(0,0, 0, 0.2);
}

.form-select:focus {
	border-color: rgba(var(--bs-secondary-rgb),0.1);
	box-shadow: 0 0 0 0.1rem rgba(0,0, 0, 0.2);
}

.form-control-sm:focus {
	border-color: #000;
	border-color: rgba(var(--bs-secondary-rgb),0.1);
	box-shadow: 0 0 0 0.1rem rgba(var(--bs-dark-rgb), 0.2);
}

.form-check-input:focus {
	border-color: rgba(var(--bs-secondary-rgb),0.1);
	box-shadow: 0 0 0 0.1rem rgba(var(--bs-dark-rgb), 0.2);
}


.form-check-input:checked {
	background-color: rgb(var(--bs-secondary-rgb));
	border-color: rgba(var(--bs-primary-rgb),var(--bs-bg-opacity));
}

.pointer {
	cursor: pointer
}

.grab {
	cursor: grab
}


.modal-content > .was-validated .form-check-input:valid ~ .form-check-label {
	color: var(--bs-modal-color);
}

.modal-content > .was-validated .form-check-input:valid, .form-check-input.is-valid {
	border-color: var(--bs-border-color);
}

.nav-link.text-primary.disabled {
	color: var(--bs-accent3) !important;
}
.nav-link.text-primary:hover {
	color: var(--bs-accent2) !important;
}

label {
	font-family: Roboto;
	font-weight: 500;
}

label.form-check-label {
	font-family: Roboto;
	font-weight: 400;
}

input {
	font-family: Roboto;
	font-weight: 400;
}

.disabled input {
	color: var(--bs-accent3);
}

select {
	font-family: Roboto;
	font-weight: 400;
}

option {
	font-family: Roboto;
	font-weight: 400;
}

.disabled select {
	color: var(--bs-accent3);
}

.disabled span {
	color: var(--bs-accent3);
}


.form-check-input {
	margin-top: 0px;
}

.disabled label {
	color: var(--bs-accent3);
}

.fw-500 {
	font-weight: 500;
}

.navbar {
	font-family: 'Open Sans';
}

.icon-success {
	display: inline-block;
	width: 16px;
	height: 16px;
	color: var(--bs-success);
}


.icon-24 {
	display: inline-block;
	width: 24px;
	height: 24px;
}

.icon-16 {
	display: inline-block;
	width: 16px;
	height: 16px;
}

.icon-16 svg {
	vertical-align: top;
}

.icon-48 {
	display: inline-block;
	width: 48px;
	height: 48px;
}


@media(min-width:768px) {
	.border-md-start {
		border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
	}
}


::-webkit-scrollbar {
	width: 9px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-track:hover {
	background: transparent;
	background: #F2F2F2;
}

::-webkit-scrollbar-thumb {
	background-color: rgba(155, 155, 155, 0.5);
	border-radius: 20px;
	border: transparent;
}

::-webkit-scrollbar-thumb:hover {
	background: #6E6E6E;
}

.cross {
	position: relative;
	display: inline-block;
}

.cross::before, .cross::after {
	content: '';
	width: 110%;
	position: absolute;
	right: -1px;
	top: 50%;
}

.cross::before {
	border-bottom: 3px solid red;
	-webkit-transform: skewY(-20deg);
	transform: skewY(-20deg);
}

.cross::after {
	border-bottom: 3px solid red;
	-webkit-transform: skewY(20deg);
	transform: skewY(20deg);
}

.navbar-toggler {
	padding-left: 8px;
	padding-right: 8px;
}

.show-reload-container {
	
}

.navbar-toggler.show-reload-container {
	padding-left: 4px;
	padding-right: 4px;
}

.icon-reload {
	height: 24px;
	width: 24px;
	display: inline-block;
	transform: rotate(0.15turn);
}

.header-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}

.header-icon svg {
	display: block;
}

#searchEditor {
	border-color: rgba(255, 255, 255, 0.5);
}

.bottom-bar-btn-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	flex-shrink: 0;
}

	.bottom-bar-btn-icon svg {
		vertical-align: top;
	}

.user-options {
	font-size: .875rem;
	height: calc(var(--page-height) - var(--header-height) - var(--bottom-bar));
}

@media(min-width:992px) {
	.user-options {
		height: calc(var(--page-height) - var(--header-height));
	}
}

.user-bottom-bar {
	height: var(--bottom-bar);
}


.user-options-profile {
	max-width: 600px;
}

.user-options-settings {
	max-width: 600px;
}

.user-menu-icon {
	width: 18px;
	height: 18px;
	display: inline-block;
	margin-right: 0.5em;
}

.user-menu-item {
	width: 90%;
	cursor: pointer;
	min-height: 60px;
	max-height: 90px;
}

.user-left-menu {
	min-width: 250px;
	width: 250px;
	height: calc(var(--page-height) - var(--header-height));
}


.btn-add-text {
	width: 30px;
	height: 30px;
}


#subscriptionDragBox * {
	pointer-events: none;
}

#subscriptionDragBox {
	opacity: 0.8;
	width: 200px;
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
	z-index: 100;
	pointer-events: none;
	cursor: grab !important;
}

.drag-icon {
	position: relative;
	left: -5px;
	width: 10px;
	cursor: grab !important;
}

.drag-icon:hover {
	cursor: grab !important;
}

.icon-box-text {
	position: absolute;
	left: 29px;
	top: 16px;
}

#subscriptionDragBox .drag-icon {
	left: -15px;
}


#subscriptionDragBox .icon-box-text {
	left: initial;
	right: 29px;
}

.left-menu {
	min-width: 250px;
	width: 280px;
	height: calc(var(--page-height) - var(--header-height));
}

.add-group-icon {
	display: inline-block;
	width: 20px;
	height: 20px;
}

.add-subscription-btn {
	display: inline-block;
	width: 18px;
	height: 18px;
}

.item-is-dragging .item-drag-above {
	pointer-events: initial !important;
}

.item-drag-above.allowed {
	background-color: rgba(var(--bs-success-rgb),0.1);
	border-radius: 0.5em;
}

	.item-drag-above.allowed > span {
		display: block !important;
	}

.item-drag-unparent.allowed > span {
	display: block !important;
}

.item-is-dragging .subscription-box * {
	pointer-events: none;
}


.item-is-dragging .subscription-box * {
	pointer-events: none;
}

.subscription-box.allowed * {
	color: rgba(var(--bs-success-rgb),0.8) !important;
}

.subscription-box.allowed span.badge {
	color: white !important;
	background-color: rgba(var(--bs-success-rgb),0.8) !important;
}

.subscription-box.disallowed * {
	color: rgba(var(--bs-danger-rgb),0.8) !important;
}

.subscription-box.disallowed span.badge {
	color: white !important;
	background-color: rgba(var(--bs-danger-rgb),0.8) !important;
}

.subscription-menu {
	font-family: Roboto;
}

.subscription-menu .badge {
	background-color: var(--bs-light);
	color: var(--bs-dark);
}

.subscription-menu.active {
	background-color: var(--bs-accent1);
	color: var(--bs-accent3);
	font-weight: bold;
	border-radius: 5px;
	
}

.subscription-menu.active .badge {
	background-color: var(--bs-white);
	color: var(--bs-dark);
	font-weight: 500;
}

.subscription-icon {
	display: inline-block;
	width: 18px;
	height: 18px;
}

.subscription-icon svg {
	vertical-align: baseline;
}

.toolbar {
	height: var(--toolbar);
}

.icon-chevron-right {
	width: 18px;
	height: 18px;
	display: inline-block;
}


.icon-chevron-left {
	width: 18px;
	height: 18px;
	display: inline-block;
}


.icon-chevron-down {
	width: 18px;
	height: 18px;
	display: inline-block;
}

.icon-chevron-down.feather {
	width: 16px;
	height: 16px;
	display: inline-block;
}

.chevron-toggler > .icon-chevron-right {
	display: none;
}

.chevron-toggler > .icon-chevron-left {
	display: none;
}

.chevron-toggler > .icon-chevron-down {
	display: inline-block;
}

.chevron-toggler.collapsed > .icon-chevron-right {
	display: inline-block;
}

.chevron-toggler.collapsed > .icon-chevron-left {
	display: inline-block;
}

.chevron-toggler.collapsed > .icon-chevron-down {
	display: none;
}

#subscriptionFilterEdit::placeholder {
	color: white;
	opacity: 0.7;
}

.group {
	
}

.group-options {
	width: 18px;
	height: 18px;
	display: inline-block;
	cursor: pointer;
}

.subscription-options {
	width: 20px;
	height: 20px;
	display: inline-block;
	cursor: pointer;
}

.dropdown-item {
	cursor: pointer;
}

.modal .btn-sm {
	min-width: 100px;
}


.item-shelf-btn {
	
}

.item-shelf-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}


@media(min-width:1100px) {
	.item-shelf-icon {
	}
}

.item-expand-btn {
}

.item-expand-icon {
	width: 20px;
	height: 20px;
	display: inline-block;
}


@media(min-width:1100px) {
	.item-expand-icon {
	}
}

.subscription-items {
	font-size: .875rem;
	height: calc(var(--page-height) - var(--header-height));
}


@media(min-width:992px) {
	.subscription-items {
		height: calc(var(--page-height) - var(--header-height));
	}
}

.shelved-items {
	font-size: .875rem;
	height: calc(var(--page-height) - var(--header-height));
}


@media(min-width:992px) {
	.shelved-items {
		height: calc(var(--page-height) - var(--header-height));
	}
}

.show-sidebar-icon {
	height: 30px;
	display: inline-block;
	width: 30px;
}


.show-markread-icon {
	height: 24px;
	display: inline-block;
	width: 24px;
}

.item {
	max-width: 1100px;	
}

.item.read{
	opacity: 0.5;
}

.item-img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	
	max-height: var(--item-content-max-height);
}

.item-description {
	max-height: var(--item-content-max-height);
	overflow: hidden;
	position: relative;
}

.item.expand .item-description {
	max-height: 100vh;
}

.item-description:after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	background: linear-gradient(transparent 150px, white);
}


.item.expand .item-description:after {
	display: none;
}


.item .item-expand-btn-text:after {
	content: 'Expand';
}

.item.expand .item-expand-btn-text:after {
	content: 'Collapse';
}

.subscription .badge {
	background-color: var(--bs-primary) !important;
	color: var(--bs-white) !important;
}

.subscription .badge[data-count='0'] {
	background-color: var(--bs-light) !important;
	color: var(--bs-dark) !important;
}

.item-images-container {
	min-height: 60px;
}

.item-description br {
	margin-bottom: 8px;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a71553' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23a71553' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.img-stub {
	width: 150px;
	height: 80px;
}

.caret-off::before {
	display: none !important;
}

.caret-off::after {
	display: none !important;
}