div#buddydrive-main {
	.buddydrive-hide {
		display: none;
	}

	.buddydrive-clear {
		clear: both;
	}

	#buddydrive-loading,
	.buddydrive-stats-loading {
		display: block;
		width: 40px;
		height: 40px;
		margin: 0 auto;
	}

	#buddydrive-uploader {
		margin: 5px auto 15px;
		width: 100%;

		.drag-drop {
			#drag-drop-area {
				box-sizing: border-box;
				display: table;
				height: 100%;
				width: 100%;
				border-radius: 6px;
			}

			.drag-drop-inside {
				padding: 40px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 100%;
				width: 100%;
				gap: 20px;
				p {
					margin: 0;
				}
				input#bp-browse-button {
					margin: 0;
				}
			}
		}

		#bp-upload-ui:not(.drag-drop) {
			#bp-browse-button {
				width: 99%;
			}

			.moxie-shim {
				width: 100% !important;
				height: 100% !important;
			}
		}
	}

	ul {
		&#buddydrive-browser {
			clear: both;
			margin: 0;
			overflow: hidden;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;

			li {
				grid-template-columns: 1fr;
				position: relative;
				box-sizing: border-box;
				list-style: none;
				background: #fff;
				border: 1px solid #e5e5e5;
				overflow: hidden;
				border-radius: 6px;

				&.buddydrive-item {
					width: 100%;
					min-height: 130px;
					.buddydrive-share-dialog {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						background-color: #222;
						background-color: rgba(10, 10, 10, 0.9);
						color: #fff;
						opacity: 1;
						-webkit-transition: opacity 0.25s ease-in-out;
						transition: opacity 0.25s ease-in-out;
					}

					.buddydrive-share-dialog-close {
						margin: -8px 0 0;
						padding: 0;
						background: transparent;
						border: none;
						cursor: pointer;
						outline: none;
						position: absolute;
						top: 15px;
						right: 5px;
						font-size: 22px;

						.dashicons {
							padding: 4px;
						}

						&:focus .dashicons {
							-webkit-box-shadow:
								0 0 0 1px #5b9dd9,
								0 0 2px 1px rgba(30, 140, 190, 0.8);
							box-shadow:
								0 0 0 1px #5b9dd9,
								0 0 2px 1px rgba(30, 140, 190, 0.8);
							-webkit-border-radius: 100%;
							border-radius: 100%;
						}

						&:hover {
							text-decoration: none;
						}

						.dashicons {
							height: 24px;
							width: 24px;
							-webkit-background-size: 24px 24px;
							background-size: 24px;
							color: #fff;
							font-size: 22px;
						}
					}

					.buddydrive-share-content {
						height: 100%;
						-webkit-transform-style: preserve-3d;
						transform-style: preserve-3d;
						overflow: hidden;
						box-sizing: border-box;

						.buddydrive-share-input {
							margin: 1em;
						}

						p.description {
							color: #fff;
						}
					}

					.buddydrive-share-url {
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						width: 80%;
						border: none;
						height: 28px;
						margin: 0 0 10px 0;
						padding: 0 5px;
						font:
							400 14px/1.5 "Open Sans",
							sans-serif;
						resize: none;
						cursor: text;
					}
				}
			}

			&.bulk-select li.buddydrive-item {
				opacity: 0.55;

				&.bulk-selected {
					opacity: 1;
					border: solid 2px #888;
				}

				&.not-bulk-editable {
					display: none;
				}
			}

			li {
				.buddydrive-progress {
					background: none;
					border: 1px solid #e5e5e5;
					height: 1em;
					margin: 8% auto;
					padding: 0;
					overflow: hidden;
					width: 80%;
				}

				.buddydrive-bar {
					background-color: #888;
					width: 0;
					height: 100%;
					z-index: 9;
				}

				.buddydrive-icon {
					float: left;
					width: 100px;
					height: 100%;
					display: table;
					border-right: 1px solid #e5e5e5;

					a {
						display: table-cell;
						vertical-align: middle;
						border: none;
						text-decoration: none;
					}

					img {
						max-width: 100%;
						display: block;
						margin: auto;
						border-radius: 0;
						border: none;
						box-shadow: none;
					}
				}

				.buddydrive-content {
					margin-left: 105px;
					position: relative;
					height: 100%;
					padding: 20px;
					box-sizing: border-box;

					div {
						margin-bottom: 5px;
					}

					.buddydrive-title {
						font-weight: bold;
						font-size: 110%;

						.buddydrive-name {
							display: inline-block;
							margin-right: 25px;
						}
					}

					.buddydrive-description p {
						font-weight: 200;
						font-size: 80%;
						margin: 0;
						margin-right: 5px;
						height: 40px;
						overflow: hidden;
						color: #aaa;
					}

					.buddydrive-actions {
						position: absolute;
						bottom: 5px;
						right: 0;
						margin-right: 5px;

						.buddydrive-owner img {
							width: 24px;
							height: 24px;
							vertical-align: top;
						}
					}
				}
			}
		}

		&.subsubsub li .avatar {
			width: 24px;
			height: 24px;
			vertical-align: top;
		}

		&#buddydrive-browser span.icon-privacy {
			position: absolute;
			top: 0;
			right: 0;
			margin-right: 5px;
		}
	}

	span.icon-privacy:before,
	.buddydrive-actions a:before,
	ul.subsubsub li:nth-child(n + 2):before,
	#buddydrive-remove-parent:before,
	form.buddydrive-item-details .buddydrive-object-remove:before,
	#buddydrive-status div.buddydrive-feedback p:before {
		font-family: "dashicons";
		display: inline-block;
		width: 24px;
		height: 24px;
		line-height: 1;
		font-size: 24px;
		font-weight: normal;
		font-style: normal;
		vertical-align: top;
		text-align: center;
		-webkit-transition: color 0.1s ease-in 0;
		transition: color 0.1s ease-in 0;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	span.icon-privacy {
		&.private:before {
			content: "\f160";
		}

		&.groups:before {
			content: "\f456";
		}

		&.public:before {
			content: "\f177";
		}

		&.password:before {
			content: "\f112";
		}

		&.friends:before {
			content: "\f454";
		}

		&.members:before {
			content: "\f307";
		}
	}

	.buddydrive-actions a {
		&.buddydrive-edit:before {
			content: "\f464";
		}

		&.buddydrive-delete:before {
			content: "\f182";
		}

		&.buddydrive-share:before {
			content: "\f237";
		}
	}

	#buddydrive-remove-parent:before,
	.buddydrive-object-remove:before {
		content: "\f158";
		vertical-align: bottom;
	}

	ul.bread-crumbs {
		width: 100%;
		float: none;
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;

		li {
			display: flex;
			align-items: center;

			&:nth-child(n + 2):before {
				content: "\f522";
				font-size: 90%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.buddydrive-actions a {
		text-decoration: none;
		border: none;

		&:not(:last-child):after {
			content: " | ";
			font-size: 90%;
			vertical-align: baseline;
			color: #888;
		}
	}

	ul.subsubsub li.current {
		color: #000;
		font-weight: 600;
	}

	.buddydrive-toolbar,
	#buddydrive-actions-form,
	#buddydrive-load-more {
		height: auto;
		box-sizing: border-box;
		margin: 12px 0 15px;
		padding: 10px;
		width: 100%;
		border: 1px solid #e5e5e5;
		background: #fff;
		color: #555;
		font-size: 13px;
		overflow: hidden;
	}

	#buddydrive-status div.buddydrive-feedback {
		height: auto;
		box-sizing: border-box;
		margin: 12px 0 15px;
		padding: 10px;
		width: 100%;
		border: 1px solid #e5e5e5;
		background: #fff;
		color: #555;
		font-size: 13px;
		overflow: hidden;
		border-radius: 6px;

		p {
			&:before {
				margin-right: 10px;
				vertical-align: bottom;
			}

			&.info:before {
				content: "\f348";
				color: #3388aa;
			}

			&.error:before {
				content: "\f534";
				color: #dd3333;
			}

			&.warning:before {
				content: "\f534";
				color: #dd3333;
				color: #ffd087;
			}
		}
	}

	section.buddydrive-item #buddydrive-status div.buddydrive-feedback {
		width: 100%;
	}

	#buddydrive-load-more {
		font-weight: bolder;
		cursor: pointer;
	}

	ul#buddydrive-manage-actions {
		overflow: hidden;
		list-style: none;
		margin: 0;
		height: 28px;

		li {
			display: inline-block;
			margin: 0.35em 1em 0;

			a {
				text-decoration: none;
				border: none;
			}
		}
	}

	nav.buddydrive-toolbar {
		width: 100%;
		margin-bottom: 20px;
		border-radius: 6px;
		display: flex;
		gap: 10px;

		ul#buddydrive-manage-actions {
			flex: 1;
			margin-left: -40px;
		}

		select#buddydrive-filter {
			padding: 2px 7px;
			min-width: 120px;
			height: 33px;
			border-radius: 6px;
			border: 1px solid #e5e5e5;
		}

		#buddydrive-search-input {
			padding: 2px 7px;
			height: 33px;
			min-height: 100%;
			-webkit-appearance: textfield;
			border-radius: 6px;
			background-color: #fff;
			border: 1px solid #e5e5e5;
		}
	}

	#buddydrive-actions-form {
		border-radius: 6px;
		border: 1px solid #e5e5e5;

		#buddydrive-bulk-edit {
			width: 60%;
			margin: 0 auto;
			text-align: center;

			button {
				margin: 0 1em;
			}
		}

		#buddydrive-new-folder {
			display: flex;
			justify-content: center;
			gap: 10px;
			input {
				padding: 2px 7px;
				-webkit-appearance: textfield;
				border-radius: 6px;
				background-color: #fff;
				border: 1px solid #e5e5e5;
			}
		}
	}

	section.buddydrive-item {
		margin-top: 20px;
		border-radius: 6px;
	}

	header#buddydrive-item-header,
	article#buddydrive-item-content {
		border: 1px solid #e5e5e5;
		-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
		background: #fff;
		overflow: hidden;
		clear: both;
	}

	header#buddydrive-item-header {
		overflow: hidden;
		padding: 20px;
		-webkit-border-top-left-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		-moz-border-radius-topleft: 8px;
		-moz-border-radius-topright: 8px;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;

		> div {
			display: flex;
			align-items: center;
			gap: 20px;
			.buddydrive-icon {
				img {
					max-width: 100%;
					height: 30px;
					border-radius: 0;
					border: none;
					box-shadow: none;
					vertical-align: top;
				}
			}

			h2.buddydrive-title {
				margin: 0;
				padding: 0;
				font-size: 22px;
			}
		}
	}

	article#buddydrive-item-content {
		-webkit-border-bottom-right-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
		-moz-border-radius-bottomright: 8px;
		-moz-border-radius-bottomleft: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
	}

	form.buddydrive-item-details {
		padding: 1em;
		-webkit-border-bottom-right-radius: 8px;
		-webkit-border-bottom-left-radius: 8px;
		-moz-border-radius-bottomright: 8px;
		-moz-border-radius-bottomleft: 8px;
		border-bottom-right-radius: 8px;
		border-bottom-left-radius: 8px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		input[type="text"],
		label,
		textarea {
			width: 100%;
			margin: 0.5em 0;
		}

		input[type="text"],
		textarea {
			border: 1px solid #e5e5e5;
			padding: 10px;
			border-radius: 6px;
			box-sizing: border-box;
		}

		label {
			font-weight: bold;
			display: block;
		}

		select#buddydrive-privacy-filter {
			max-width: 18%;
		}

		#buddydrive-autocomplete {
			position: absolute;
			float: left;
			z-index: 1000;
			overflow: hidden;
			margin-bottom: 1em;
			margin-left: 20%;
			margin-top: -2.75em;
			width: 40%;

			li:not(:first-child) {
				background-color: #fff;
				margin: 0;
				padding: 5px;
				border: solid 1px #f1f1f1;
				border-top: none;
			}
		}

		#buddydrive-object-selection .buddydrive-item {
			display: inline-block;
			padding: 0.5em;
			border: solid 1px #f1f1f1;
			margin: 0 0.5em 0.5em 0;
		}

		#buddydrive-autocomplete .buddydrive-item {
			cursor: pointer;
		}

		#buddydrive-object-selection .buddydrive-item .icon-privacy:before {
			vertical-align: text-bottom;
		}

		.buddydrive-item img.avatar {
			width: 20px;
			height: 20px;
			vertical-align: text-bottom;
		}
	}

	#buddydrive-status div.buddydrive-feedback img.avatar {
		width: 20px;
		height: 20px;
		vertical-align: text-bottom;
	}

	form.buddydrive-item-details .submit {
		float: right;
		input {
			margin-left: 1em;
			padding: 10px 20px;
		}
	}
}

@media only screen and (min-width: 1024px) {
	div#buddydrive-main:not(.mini) ul#buddydrive-browser li {
		.buddydrive-content .buddydrive-description p {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	}
}

@media only screen and (max-width: 768px) {
	ul#buddydrive-browser {
		grid-template-columns: 1fr !important;
		.buddydrive-item {
			.buddydrive-icon {
				width: 70px;
			}
			.buddydrive-content {
				.buddydrive-title {
					font-size: 15px !important;
				}
			}
		}
	}
}

body.wp-admin {
	#buddydrive-main {
		nav.buddydrive-toolbar {
			ul#buddydrive-manage-actions {
				margin-left: 0px !important;
			}
		}

		#buddydrive-uploader {
			.bp-uploader-window {
				.drag-drop-inside {
					box-sizing: border-box;
					margin: 0;
				}
			}
		}
	}
}