/* CSS for the layout and appearance */


/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
	display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
	-ms-overflow-style: none;
	/* IE and Edge */
	/* scrollbar-width: none; */
	/* Firefox */
}

/* Ensure scrolling is still possible */
.no-scrollbar {
	overflow-y: scroll;
	/* or overflow-x if horizontal scroll */
}


body,
body.app {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	/*background-color: #4b4b4b;*/
	/* background: #010517; */
	/* background: radial-gradient(at left top, #010517, #102049); */
	/* background-color: #243c55!important; */
	background-color: #111 !important;
	color: #fff !important;
	/* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1000%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='%230e2a47'%3e%3c/rect%3e%3cpath d='M 0%2c104 C 57.6%2c118.6 172.8%2c177.6 288%2c177 C 403.2%2c176.4 460.8%2c83 576%2c101 C 691.2%2c119 748.8%2c261.6 864%2c267 C 979.2%2c272.4 1036.8%2c140 1152%2c128 C 1267.2%2c116 1382.4%2c191.2 1440%2c207L1440 560L0 560z' fill='%23184a7e'%3e%3c/path%3e%3cpath d='M 0%2c430 C 96%2c420.4 288%2c360.2 480%2c382 C 672%2c403.8 768%2c550.6 960%2c539 C 1152%2c527.4 1344%2c367 1440%2c324L1440 560L0 560z' fill='%232264ab'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1000'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e"); */
	background-repeat: no-repeat;
	background-blend-mode: luminosity;
	background-size: cover;
	/* background-color: #5f5f5f !important; */
	background-attachment: fixed;
}

/*
* Created with https://www.css-gradient.com
* Gradient link: https://www.css-gradient.com/?c1=113282&c2=633963&gt=r&gd=dtl
*/

a {
	text-decoration: none;
}

.hide,
.hidden,
.icon.hide {
	display: none;
}

.icon.hide.show {
	display: inline-block;

}

.icon.hide.show img {
	border: 1px dashed #626262;
}


.tag-folder-button,
.collapse-button {
	cursor: pointer;
	color: #9e9e9e;
	margin-right: 15px;
}

.tag-folder-button:hover {
	color: #9e9e9e !important;
}


.tag-folder-button svg {
	display: inline-block;
	text-align: center;
	top: -1px;
	position: relative;
	cursor: pointer;
	width: 20px;
	height: auto;
}


.tag-list {
	display: none;
	margin-top: 15px;
	margin-bottom: -5px;
}

.tag-list.active {
	display: block;
}

.tag-list .btn-sm {
	font-size: 0.82rem;
}

.tag-list .btn-dark {
	background-color: #181818;
	border: 0.85rem;
	color: #afafaf;

}

span.folder-control {
	margin-right: 10px;
}


/* Top Menu */

#top-menu {
	text-align: center;
}

div#search-box {
	text-align: left;
	width: 100%;
	/* padding-left: 75px; */
	display: inline;
	/* position: fixed; */
	z-index: 1;
}

#search-bar {
	/* margin: 0 auto; */
	max-width: 80%;
	display: inline-flex;
	margin-left: 15px;
	/* width: 40%; */
}

#search-bar input {
	/* width: 650px; */
	border: 0;
	font-size: 19px;
	height: 53px;
	padding: 10px 15px;
	background-color: #232529;
	color: #fff;
	/* border: 3px solid #fff; */
	border-radius: 0.375rem;
}

#search-bar input.has-active-buttons {
	border-radius: 0.375rem 0 0 0.375rem;
}

button.btn.btn-search.btn-primary {
	display: none;
}

#search-bar {
	box-shadow: 0px 0px 25px 11px #000000d4;
	height: 53px;
	/* border: 1px solid #000; */
	border-radius: 0.375rem;
}



/* Sidebar */
.sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 200px;
	height: 100vh;
	background-color: #f2f2f2;
	transition: transform 0.3s;
	background-color: #313131;
}

.sidebar.hide {
	transform: translateX(-200px);
}

.settings button {
	width: 160px;
}

.settings {
	text-align: center;
}

.extension-panel {
	padding: 0px 10px;
}

h3.extension-panel-header {
	text-align: center;
	color: #fff;
	padding: 5px 15px;
}

.status-message {
	padding: 10px;
	text-align: center;
	/* background-color: #efcd8e;*/
	font-size: 12px;
	color: #ffffff70;
}

/* Top Menu */
.top-menu {
	background-color: transparent;
	color: #fff;
	padding: 15px;
	margin-top: 50px;
	margin-bottom: 15px;
	/* position: fixed; */
	top: 0;
	left: 0;
	z-index: 1;
	width: 96%;
	margin: 0 auto;
	margin-top: 50px;
	/* margin-bottom: 23px; */
	text-align: left;
}

.btn-search {
	margin-left: 15px;
}

.btn.btn-save-search.active {
	height: 53px;
	background-color: #000;
	border: 1px solid #242529 !important;
	display: block;
}

input#search-terms.save-active,
#search-bar input.active {
	border-radius: 0.375rem 0 0 0.375rem !important;
}

.btn.btn-save-search {
	background-color: #242529;
	border: 1px solid #242529;
	color: #242529;
	height: 53px;
	display: none;
}




/* Content Section */



#content.loading {
	opacity: 0.0;
	animation: blink 2s linear infinite;

}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

.content {
	padding: 20px;
	/* text-align: center; */
	/* width: 70%; */
	margin: 0 auto;
	/* margin-top: 75px; */
}

.tagfolder {
	width: 96%;
	margin: 25px auto;
	text-align: center;
	margin-bottom: 10px;
}

.tagfolder.collapsed {
	margin-bottom: 35px;
}

.tagfolder.collapsed ul {
	display: none;
}



.collapsed.tagfolder h5 {
	border-bottom: 1px solid #1c1c1c;
	padding-bottom: 10px;
	box-shadow: 0px 5px 5px -5px #000000c4;
	/* border-radius: 10px; */
}

/* .collapsed ul {
	display: none;
} */


ul {
	max-height: auto;
	/* Adjust as needed */
	overflow: hidden;
	transition: max-height 0.5s ease-out, opacity 0s ease-out;
	opacity: 1;
}

.collapsed ul {
	max-height: 0;
	opacity: 0;
	transition: max-height 0.5s ease-in, opacity 0s ease-in;
	padding-bottom: 0;
	margin-bottom: 0;
}

.tagfolder h5,
span.folder-control {
	padding-left: 15px;
	color: #9e9e9e;
	font-weight: 600;
	text-align: left;
}

/* iOS-like Icons */
.icon {
	display: inline-block;
	text-align: center;
	/* margin-right: 20px; */
	margin-bottom: 25px;
	width: 80px;
	margin: 10px 10px 10px 10px;
}

.icon img {
	width: 70px;
	height: 70px;
	/* margin-right: 10px; */
	border-radius: 10px;
	background-color: rgb(34 37 41);
	padding: 16px;
	min-width: 70px;
	min-height: 70px;
}

li.icon:hover img {
	padding: 14px;
}

/* .icon img {
    display: block;
    padding: 16px;
    width: 70px;
    height: 70px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px 0px;
    border-radius: 8px;
    object-fit: contain;
    background: rgba(83, 79, 79, 0.554);
} */

.icon-caption,
.icon-caption h5 {
	/* max-width: fit-content; */
	overflow: hidden;
	white-space: nowrap;
	/* text-overflow: ellipsis; */
	font-size: 11px;
	margin-top: 5px;
	color: rgb(255 255 255 / 59%);
	text-decoration: none !important;
	border: 0px !important;
	color: #c4c4c4;
	letter-spacing: .7px;
	/* cursor: pointer; */
	padding: 0;
	font-weight: 70;
	/* min-height: 19px; */
	/* visibility: hidden; */
	width: 100%;
	text-align: center;
	text-shadow: 0px 1px 3px #000;
}

.search-results h5.icon-title {
	font-size: 15px;
	font-weight: bold;
	padding-left: 0;
	overflow: visible;
	white-space: normal;
	line-height: 21px;
	text-align: left;
	text-shadow: 0px 1px 1px black;
	width: 99%;
}

/* li.icon:hover .icon-caption {
	color: #fff;
	max-width: fit-content;
	padding-left: 0;
	overflow: auto;
}
 */
li .icon-excerpt {
	display: none;
}

.search-results li .icon-excerpt {
	display: block;
	font-size: 13px;
	overflow: hidden;
	text-align: left;
	color: #535353;
	width: 99%;
}

.search-results h5.icon-caption {
	text-align: left;
}

a.icon-link {
	display: inline-block;
}


.icon-list {
	/* text-align: left; */
	margin: 0 auto;
	padding: 15px;
	background-color: #00000054;
	border-radius: 10px;
	width: 100%;
	display: block;
	/* display: none; */
	/* padding-bottom: 0; */
}

#loading-spinner {
	font-size: 13px;
	color: #515151;
}

div#search-bar-spinner {
	position: relative;
	left: 20px;
	top: 7px;
}

.item-count,
.greyed-out {
	color: #232529;
}

/* -- search-results -- */

.search-results h5#tag-folder-title-572 {
	margin-bottom: -10px;
	padding-left: 40px;
}

.search-results li.icon a {
	display: block;
	/* float: left; */
	/* clear: both; */
	height: 70px;
}

.search-results li.icon,
li.icon.expand {
	/* width: 30% !important; */
	display: inline-flex;
	/* border: 2px solid #252525; */
	border-radius: 5px;
	padding: 15px;
	margin-bottom: 5px;
	text-align: left;
	min-height: 105px;
	height: 165px;
	/* overflow-y: clip; */
	background-color: hsl(0 -2% 7% / 1);
	/* max-width: 350px; */
	/* min-width: 250px; */
	width: 320px;
}

.search-results .icon-caption {
	text-overflow: unset;
	width: auto;
	max-width: none;
	text-wrap: balance;
	padding-left: 14.5px;
	margin-top: 0;
	font-size: 14px;
	color: #a8a8a8;
	display: block;
	clear: both;
	width: 100%;
}

.search-results ul.icon-list {
	text-align: left;
}

.search-results ul.icon-list {
	background-color: transparent;
	text-align: center;
}

.excerpt {
	display: none;
}

.search-results .excerpt {
	display: block;
}


li.icon.expand {
	position: absolute;
	width: 350px !important;
	z-index: 10000000;
	margin-top: -4px;
	margin-left: -60px;
	box-shadow: 1px 0px 10px 0px #000000bf;
	border: 3px solid #1f1f1fd4;
}

div#search-terms-spinner {
	position: relative;
	left: 15px;
	top: 11px;
	width: 67px;
}

span.edit-link-wrapper {
	left: 73px !important;
	top: 2px !important;
}

.search-results span.edit-link-wrapper {
	left: 82px !important;
	top: 16px !important;
}

span.edit-link-wrapper .edit-link {
	visibility: hidden;
	cursor: pointer;
}

span.edit-link-wrapper:hover .edit-link {
	visibility: visible;
}


.edit-bookmark-form {
	max-width: 500px;
	margin: auto;
	padding: 20px;
	background-color: transparent;
	border-radius: 5px;
	/* background-color: #000; */
}

.form-control,
.btn-remove {
	margin-bottom: 10px;
}

/* .form-control:focus,
.form-control:active,
input:-internal-autofill-selected {
	border-color: inherit;
	background-color: #232529 !important;

box-shadow: none !important;

width: 80% !important;
}

*/

.form-control:focus {
	border: 0 !important;
	box-shadow: none !important;
}

.modal-body .form-control:focus {
	border-bottom: 1px solid #747474 !important;
}

/* Chrome, Safari, and Opera */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0 30px #232529 inset !important;
	color: #fff !important;
	background-color: #232529 !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 19px !important;
	height: 53px !important;
	padding: 10px 15px !important;
	border-radius: 0.375rem !important;
}

/* Mozilla Firefox */
input:-moz-autofill,
input:-moz-autofill:hover,
input:-moz-autofill:focus,
input:-moz-autofill:active {
	color: #fff !important;
	background-color: #232529 !important;
	color: #fff !important;
	border: 0 !important;
	font-size: 19px !important;
	height: 53px !important;
	padding: 10px 15px !important;
	border-radius: 0.375rem !important;
}

/* Microsoft Edge */
input:-ms-autofill,
input:-ms-autofill:hover,
input:-ms-autofill:focus,
input:-ms-autofill:active {
	color: #fff !important;
	background-color: #232529 !important;
	border: 0 !important;
	font-size: 19px !important;
	height: 53px !important;
	padding: 10px 15px !important;
	border-radius: 0.375rem !important;
}



.btn-remove {
	background-color: #dc3545;
	color: #232529;
}

.modal-body {
	background-color: #000;
}

.modal-content {
	background-color: transparent;
}

.modal-backdrop.fade.show {
	opacity: 0.92;
	background-color: #101010;
}

.tags-look {
	z-index: 9055;
	color: #000;
	--tagify-dd-color-primary: #000;
	--tagify-dd-bg-color: var(--tag-bg)
}

.tags-look .tagify__dropdown__item {
	display: inline-block;
	vertical-align: middle;
	border-radius: 3px;
	padding: .3em .5em;
	border: 1px solid #CCC;
	background: #F3F3F3;
	margin: .2em;
	font-size: .85em;
	color: black;
	transition: 0s;
}

.tags-look .tagify__dropdown__item--active {
	color: black;
}

.tags-look .tagify__dropdown__item:hover {
	background: lightyellow;
	border-color: gold;
}

.tags-look .tagify__dropdown__item--hidden {
	max-width: 0;
	max-height: initial;
	padding: .3em 0;
	margin: .2em 0;
	white-space: nowrap;
	text-indent: -20px;
	border: 0;
}


#edit-bookmark-form input,
#edit-bookmark-form textarea,
tags.tagify {
	background-color: #0b0b0b;
	border: 0;
	color: #8c8c8c;
	/* font-size: 12px; */
	background-color: #0a0a0a;
	background-color: transparent;
	border-bottom: 1px solid #323232;
	border-radius: 0;
}

#edit-bookmark-form label.form-label {
	font-size: 12px;
	color: #545454;
}

#edit-bookmark-form h4 {
	color: #727272;
	font-size: 18px;
	display: none;
}

.tagify {
	--tags-disabled-bg: #F1F1F1;
	--tags-border-color: #DDD;
	--tags-hover-border-color: #CCC;
	--tags-focus-border-color: transparent;
	--tag-border-radius: 3px;
	--tag-bg: #afafaf;
}

#tags {
	padding: 17px;
}

tags.tagify {
	font-size: 13px;
	background-color: #101010;
	padding: 15px;
}

div#time-widget {
	display: inline-block;
	font-size: 4rem;
	position: relative;
	top: -20px;
	opacity: 0.3;
	font-weight: bold;
	margin-right: 15px;
}



a#days-since-halving {
	color: #313131;
	text-decoration: none;
}

a#days-since-halving.danger {
	color: #ff0000;
}

/* Media Queries */
@media (max-width: 768px) {
	.sidebar {
		transform: translateX(-200px);
	}

	.content {
		margin-left: 0;
	}

	div#time-widget {
		display: none;
	}


	#apiCredentialsModal .form-control.is-invalid {
		border-color: #dc3545;
		background-color: #dc35451a;
		box-shadow: none;
	}

	#apiCredentialsModal .form-control.is-invalid:focus {
		border-color: #dc3545;
		box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
	}


	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		10%,
		30%,
		50%,
		70%,
		90% {
			transform: translateX(-5px);
		}

		20%,
		40%,
		60%,
		80% {
			transform: translateX(5px);
		}
	}

	#apiCredentialsModal.shake {
		animation: shake 0.6s cubic-bezier(.36, .07, .19, .97) both;
	}


	/* API Credentials Modal Styles */
	.api-credentials-form input.success {
		transition: border-color 0.3s ease;
		border: 2px solid #28a745 !important;
		animation: flashBorder 0.5s ease;
	}

	@keyframes flashBorder {
		0% {
			border-color: transparent;
		}

		50% {
			border-color: #28a745;
		}

		100% {
			border-color: #28a745;
		}
	}

	#apiCredentialsModal .form-control {
		background-color: #0b0b0b;
		border: 1px solid #323232;
		color: #8c8c8c;
		border-radius: 4px;
	}

	#apiCredentialsModal .form-control:focus {
		border-color: #464646;
		box-shadow: none;
	}

	#apiCredentialsModal .form-label {
		color: #727272;
		font-size: 14px;
	}

	#apiCredentialsModal h4 {
		color: #9e9e9e;
	}


}