.wsi-admin-container {
	max-width: 1400px;
	font-size: 16px;
	padding: 15px;

	h2 {
		margin: 0 0 20px 0;
	}

	h3 {
		margin: 0 0 16px 0;
		font-size: 16px;
		font-weight: bold;
	}

	h4 {
		margin: 0 0 20px 0;
	}

	input {
		&.valid {
			background-color: #b4ffbc;
		}

		&.invalid {
			background-color: #ffd6d6
		}
	}

	header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 0 20px 0;

		.version {
			font-size: 16px;
			font-weight: normal;
		}
	}

	.tooltip-icon {
		margin: -1px 0 0 7px;
		color: #6c757d;
		font-size: 20px;
		line-height: 22px;
	}

	/* Make all data-tooltips appear instantly when hovering */
	[data-tooltip] {
		position: relative;
		cursor: help;

		&:after {
			content: attr(data-tooltip);
			font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
			font-weight: normal;
			font-style: normal;
			line-height: normal;
			max-width: 800px;
			min-width: 600px;
			word-wrap: break-word;
			position: absolute;
			bottom: 150%;
			left: 50%;
			transform: translateX(-50%);
			background-color: #333;
			color: #fff;
			padding: 15px 10px 15px 15px;
			border-radius: 4px;
			text-wrap: auto;
			font-size: 16px;
			opacity: 0;
			visibility: hidden;
			pointer-events: none;
			z-index: 100000;
			text-align: left;
			/* opacity: 1;
			visibility: visible; */
		}

		&:hover::after {
			opacity: 1;
			visibility: visible;
		}
	}

	.mb-1 {
		margin-bottom: 0.25rem;
	}

	.mb-2 {
		margin-bottom: 0.5rem;
	}

	.mb-3 {
		margin-bottom: 1rem;
	}

	a {
		color: #eb5b26;
	}

	p,
	strong {
		font-size: 16px;
		margin: 0 0 16px 0;
		line-height: 1.3;
	}

	.alert {
		color: #d63638;
	}

	.status {
		width: fit-content;
		margin: 0 0 20px 0;

		&.notice {
			border-left: 1px solid #c3c4c7;
			padding: 10px 15px;
		}

		&.notice-success {
			color: #296532;
		}

		&.notice-warning {
			color: #dba617;
		}
	}

	.credits.notice {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 130px;
		padding: 15px;
		font-size: 65px;
		font-weight: bold;
		border-left: 1px solid #c3c4c7;
		margin: 0 0 20px 0;

		&.notice-success {
			color: #296532;
		}

		&.notice-warning {
			color: #dba617;
		}

		&.notice-error {
			color: #d63638;
		}
	}

	hr {
		margin: 15px 0 15px 0;
	}

	.progress-bar {
		/* padding: 10px 17px 14px; */
		display: flex;
		flex-direction: column;

		.label {
			margin-bottom: 8px;
		}

		.bar {
			width: 100%;
			height: 16px;
			margin-bottom: 8px;
			border-radius: 6px;
			overflow: hidden;
			position: relative;
			background-color: #e9eeef;
		}

		.bar::before {
			content: '';
			width: var(--bar-width);
			height: 16px;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #198754;
		}

		.count {
			align-self: end;
		}
	}

	.input-group {
		display: flex;
		flex-direction: column;
		margin: 0 0 16px 0;
		padding: 0 0 8px 8px;

		label {
			margin: 0 0 8px 0;
		}
	}

	p.text-input {
		label {
			display: block;
			margin-bottom: 0.25rem;
		}
	}

	.hide {
		display: none !important;
	}

	.wsi-focus-range {
		label {
			line-height: 26px;
		}

		.range-text {
			display: inline-block;
			width: 40px;
			text-align: center;
		}
	}

	#wsi-focus-weights-list:not(:has(.wsi-focus-range))+.submit {
		display: none;
	}

	#wsi-focus-weights-list>.wsi-focus-range:last-child>.col {
		margin-bottom: 0;
	}

	.flex {
		display: flex;
		row-gap: 1.5rem;
		column-gap: 1.5rem;

		>.col-2 {
			width: 16.66%;
		}

		>.col-3 {
			width: 25%;
		}

		>.col-4 {
			width: 33.33%;
		}

		>.col-6 {
			width: 50%;
		}

		>.col-8 {
			width: 66.66%;
		}

		>.col-9 {
			width: 75%;
		}

		>.col-10 {
			width: 83.33%;
		}

		>.col {
			margin-bottom: 1.5rem;

			>.postbox.equal-height {
				height: 100%;
			}
		}
	}

	.postbox {
		padding: 1.5rem;
		box-sizing: border-box;
		position: relative;

		&.loading {
			opacity: 0.6;
			min-height: 420px;
		}

		#wsi-images-used {
			font-size: 1.5rem;
			margin-bottom: 0.5rem;

			>span {
				font-weight: bold;
			}
		}

		.checklist {
			list-style: none !important;
			padding: 0 !important;
			margin: 0 0 16px 0;

			&.no-credits {
				filter: grayscale(1);
				opacity: 0.7;
			}

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

			li.check::before {
				content: '';
				display: inline-block;
				width: 27px;
				height: 25px;
				margin-right: 7px;
				background: url(../images/icon-check.png) center center no-repeat;
				flex-shrink: 0;
			}

			li.notchecked::before {
				content: '';
				display: inline-block;
				width: 27px;
				height: 25px;
				margin-right: 7px;
				background: url() center center no-repeat;
				flex-shrink: 0;
			}
		}
	}

	.postbox::before {
		content: '';
		position: absolute;
		right: -3px;
		top: -3px;
		width: 25px;
		height: 25px;
		border-top: 5px solid #eb5b26;
		border-right: 5px solid #eb5b26;
		border-top-left-radius: 3px;
		border-left: 2px solid transparent;
		border-bottom-right-radius: 3px;
		border-bottom: 2px solid transparent;
		border-top-right-radius: 2px;
	}

	.postbox::after {
		content: '';
		position: absolute;
		left: -3px;
		bottom: -3px;
		width: 25px;
		height: 25px;
		border-bottom: 5px solid #eb5b26;
		border-left: 5px solid #eb5b26;
		border-bottom-right-radius: 3px;
		border-right: 2px solid transparent;
		border-top-left-radius: 3px;
		border-top: 2px solid transparent;
		border-bottom-left-radius: 2px;
	}

	&.wsi-admin-main {
		ul {
			list-style: disc;
			padding-left: 1.2rem;
		}
	}

	#wsi-settings-tabs {
		.tabs-content {
			border-top: 0;

			>.tab-content:not(.visible) {
				display: none;
			}

			label {
				&.disabled {
					opacity: 0.5;
					cursor: not-allowed;
				}
			}
		}
	}

	.hidden-summary {
		padding: 15px 0;
		cursor: pointer;
	}

	#wsi-manual-htaccess-content {
		width: 100%;
		height: 200px;
		font-family: monospace;
		font-size: 12px;
		padding: 10px;
		border-radius: 4px;
		border: 1px solid #ccc;
		background-color: #f8f8f8;
		resize: vertical;
	}
}

#adminmenu .toplevel_page_symmetria-smart-images .dashicons-format-image::before {
	color: #eb5b26;
}

.wsi-notice {
	position: relative;
	border-left-color: #eb5b26;
}

.wsi-error {
	color: #b32d2e;
}

.wp-list-table .column-wsi-image {
	width: 60px;
	word-break: keep-all;
}

.wp-list-table .column-wsi-image .wsi-icon::after {
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	border-radius: 3px;
	z-index: 2;
	background: url(../images/wsi-icon.png) center center no-repeat #eee;
	background-size: 70% 70%;
}

#wsi-notifications {
	.notice {
		margin: 1rem 1rem 1rem 0;
	}
}

/* Animation */
@keyframes fade-out {
	0% {
		right: 0;
	}

	100% {
		right: -300px;
	}
}

#wsi-toasts {
	position: fixed;
	top: 40px;
	right: 20px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: end;

	.wsi-toast {
		max-width: 400px;
		padding: 10px 30px 12px 17px;
		border-radius: 5px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
		cursor: pointer;
		position: relative;
		margin-bottom: 4px;
		color: #fff;
		width: fit-content;

		&.fade-out {
			animation: fade-out 0.2s forwards ease-in;
		}

		p,
		a {
			margin: 0;
			padding: 0;
			color: #fff;
			font-weight: 600;
		}

		.close {
			position: absolute;
			top: 4px;
			right: 7px;
		}

		&.wsi-success {
			background-color: #155724;
		}

		&.wsi-error {
			background-color: #d63638;
		}

		&.wsi-warning {
			background-color: #dba617;
		}
	}
}