/* Free web tools workbench (Base64, JSON, URL, JWT, Hex, Diff, UUID, Password, HTML entities) */

.web-tool {
	--wt-accent: #2a7ae2;
	--wt-accent-soft: #eaf2fd;
	--wt-border: #d8dee6;
	--wt-muted: #6b7684;
	--wt-bg: #f7f9fb;
	--wt-ok: #2e9e5b;
	--wt-bad: #d64545;
	--wt-warn: #d98a1c;
	--wt-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	margin: 0 0 10px;
}

.web-tool .wt-intro {
	color: var(--wt-muted);
	margin-bottom: 18px;
}

.web-tool .wt-intro .glyphicon {
	color: var(--wt-ok);
	margin-right: 4px;
}

/* toolbar */

.web-tool .wt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 10px 12px;
	margin-top: 28px;
	margin-bottom: 14px;
	background: var(--wt-bg);
	border: 1px solid var(--wt-border);
	border-radius: 6px;
}

.web-tool .wt-group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.web-tool .wt-group-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--wt-muted);
}

.web-tool .wt-toolbar-end {
	margin-left: auto;
	display: inline-flex;
	gap: 6px;
}

.web-tool .btn-group > .btn.active,
.web-tool .btn-group > .btn.active:hover,
.web-tool .btn-group > .btn.active:focus {
	background: var(--wt-accent);
	border-color: var(--wt-accent);
	color: #fff;
	box-shadow: none;
}

.web-tool .wt-check .glyphicon {
	opacity: .25;
	margin-right: 3px;
}

.web-tool .wt-check.active .glyphicon {
	opacity: 1;
}

.web-tool .btn-group > .btn > input[type=radio],
.web-tool .btn-group > .btn > input[type=checkbox] {
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

/* panes */

.web-tool .wt-pane {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wt-border);
	border-radius: 6px;
	background: #fff;
	margin-bottom: 14px;
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s;
}

.web-tool .wt-pane:focus-within {
	border-color: var(--wt-accent);
	box-shadow: 0 0 0 3px rgba(42, 122, 226, .12);
}

.web-tool .wt-pane-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 6px 10px;
	background: var(--wt-bg);
	border-bottom: 1px solid var(--wt-border);
}

.web-tool .wt-pane-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #3a4552;
}

.web-tool .wt-pane-actions {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 4px;
}

.web-tool .wt-pane-actions .btn {
	border-color: transparent;
	background: transparent;
	color: var(--wt-muted);
}

.web-tool .wt-pane-actions .btn:hover,
.web-tool .wt-pane-actions .btn:focus {
	background: #fff;
	border-color: var(--wt-border);
	color: #222;
}

.web-tool .wt-pane-actions .btn.wt-copied {
	color: var(--wt-ok);
	border-color: var(--wt-ok);
	background: #fff;
}

.web-tool textarea.wt-mono,
.web-tool .wt-mono {
	font-family: var(--wt-mono);
	font-size: 13px;
	line-height: 1.55;
}

.web-tool .wt-pane textarea {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	resize: vertical;
	min-height: 320px;
	padding: 12px;
	tab-size: 4;
	white-space: pre;
	overflow-wrap: normal;
	overflow: auto;
}

.web-tool .wt-pane textarea.wt-wrap {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.web-tool .wt-pane textarea:focus {
	box-shadow: none;
}

.web-tool .wt-pane textarea[readonly] {
	background: #fcfdfe;
	cursor: text;
}

.web-tool.wt-error-state .wt-pane-out {
	border-color: rgba(214, 69, 69, .5);
}

.web-tool.wt-error-state .wt-pane-out textarea {
	opacity: .45;
}

/* status bar */

.web-tool .wt-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	padding: 8px 12px;
	margin-bottom: 14px;
	font-size: 13px;
	color: var(--wt-muted);
	background: var(--wt-bg);
	border: 1px solid var(--wt-border);
	border-radius: 6px;
}

.web-tool .wt-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
}

.web-tool .wt-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wt-ok);
	box-shadow: 0 0 0 3px rgba(46, 158, 91, .18);
}

.web-tool.wt-busy .wt-dot {
	background: var(--wt-warn);
	box-shadow: 0 0 0 3px rgba(217, 138, 28, .2);
	animation: wt-pulse .8s ease-in-out infinite;
}

.web-tool.wt-error-state .wt-dot {
	background: var(--wt-bad);
	box-shadow: 0 0 0 3px rgba(214, 69, 69, .18);
}

@keyframes wt-pulse {
	50% { opacity: .35; }
}

.web-tool .wt-error {
	color: var(--wt-bad);
	font-weight: 600;
	margin-left: auto;
}

.web-tool .wt-error:empty {
	display: none;
}

.web-tool .wt-error .btn-link {
	padding: 0 0 0 8px;
	font-weight: 600;
	vertical-align: baseline;
}

.web-tool .wt-submit {
	margin-bottom: 14px;
}

.js .web-tool .wt-submit,
.js .web-tool .wt-nojs {
	display: none;
}

.web-tool .wt-js-only {
	display: none;
}

.js .web-tool .wt-js-only {
	display: block;
}

.web-tool .wt-js-inline {
	display: none;
}

.js .web-tool .wt-js-inline {
	display: inline;
	margin-left: 6px;
}

/* panels below the workbench */

.web-tool .wt-panel {
	border: 1px solid var(--wt-border);
	border-radius: 6px;
	margin-bottom: 14px;
	overflow: hidden;
}

.web-tool .wt-panel .table {
	margin: 0;
}

.web-tool .wt-panel .table > thead > tr > th {
	background: var(--wt-bg);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--wt-muted);
	border-bottom-width: 1px;
}

.web-tool .wt-panel td {
	font-family: var(--wt-mono);
	font-size: 13px;
	word-break: break-all;
}

.web-tool .wt-hidden {
	display: none !important;
}

.web-tool .wt-note {
	padding: 8px 12px;
	font-size: 12px;
	color: var(--wt-muted);
	background: var(--wt-bg);
	border-top: 1px solid var(--wt-border);
}

.web-tool .wt-empty {
	padding: 40px 16px;
	text-align: center;
	color: var(--wt-muted);
}

/* JWT */

.web-tool .wt-jwt {
	padding: 10px;
	min-height: 320px;
	background: #fcfdfe;
}

.web-tool .wt-card {
	border: 1px solid var(--wt-border);
	border-left-width: 4px;
	border-radius: 5px;
	background: #fff;
	margin-bottom: 10px;
}

.web-tool .wt-card:last-child {
	margin-bottom: 0;
}

.web-tool .wt-card-head {
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--wt-border);
}

.web-tool .wt-card pre {
	margin: 0;
	padding: 8px 12px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--wt-mono);
	font-size: 13px;
	max-height: 300px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-all;
}

.web-tool .wt-card-header { border-left-color: #e0457b; }
.web-tool .wt-card-header .wt-card-head { color: #c12d62; }
.web-tool .wt-card-payload { border-left-color: #8e4fd6; }
.web-tool .wt-card-payload .wt-card-head { color: #7438b8; }
.web-tool .wt-card-signature { border-left-color: #1aa3b8; }
.web-tool .wt-card-signature .wt-card-head { color: #11809a; }

.web-tool .wt-card .table {
	margin: 0;
	font-size: 13px;
}

.web-tool .wt-card .table td {
	border-top-color: #eef1f4;
}

.web-tool .wt-card .table td:first-child {
	font-family: var(--wt-mono);
	font-weight: 700;
	white-space: nowrap;
}

.web-tool .wt-badges {
	padding: 8px 10px;
}

.web-tool .wt-badges .label {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
}

.web-tool .wt-relative {
	color: var(--wt-muted);
	font-size: 12px;
}

/* diff */

.web-tool .wt-diff {
	max-height: 560px;
	overflow: auto;
	font-family: var(--wt-mono);
	font-size: 13px;
	line-height: 1.55;
	background: #fff;
}

.web-tool .wt-diff-line {
	display: flex;
	white-space: pre-wrap;
	word-break: break-all;
}

.web-tool .wt-diff-sign {
	flex: 0 0 28px;
	text-align: center;
	color: var(--wt-muted);
	user-select: none;
}

.web-tool .wt-diff-text {
	flex: 1 1 auto;
	padding-right: 10px;
	min-height: 1.55em;
}

.web-tool .wt-diff-add { background: #e6f6ec; }
.web-tool .wt-diff-add .wt-diff-sign { color: var(--wt-ok); background: #cdeedb; }
.web-tool .wt-diff-del { background: #fdecec; }
.web-tool .wt-diff-del .wt-diff-sign { color: var(--wt-bad); background: #f8d4d4; }

.web-tool .wt-count {
	display: inline-block;
	min-width: 38px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
}

.web-tool .wt-count-add { background: #cdeedb; color: #1f7a45; }
.web-tool .wt-count-del { background: #f8d4d4; color: #a83232; }

/* lists for generators */

.web-tool .wt-options {
	padding: 14px;
}

.web-tool .wt-options .wt-row {
	margin-bottom: 16px;
}

.web-tool .wt-options .wt-row:last-child {
	margin-bottom: 0;
}

.web-tool .wt-options .wt-group-label {
	display: block;
	margin-bottom: 6px;
}

.web-tool .wt-options .btn-group {
	flex-wrap: wrap;
}

.web-tool .wt-slider {
	display: flex;
	align-items: center;
	gap: 12px;
}

.web-tool .wt-slider input[type=range] {
	flex: 1 1 auto;
	accent-color: var(--wt-accent);
}

.web-tool .wt-slider input[type=number],
.web-tool .wt-number {
	width: 84px;
	flex: 0 0 auto;
	font-family: var(--wt-mono);
}

.web-tool .wt-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 520px;
	overflow: auto;
}

.web-tool .wt-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 14px;
	border-bottom: 1px solid #eef1f4;
}

.web-tool .wt-list li:last-child {
	border-bottom: 0;
}

.web-tool .wt-list li:hover {
	background: var(--wt-accent-soft);
}

.web-tool .wt-list code {
	flex: 1 1 auto;
	padding: 0;
	background: transparent;
	color: #1d2733;
	font-family: var(--wt-mono);
	font-size: 15px;
	word-break: break-all;
}

.web-tool .wt-list .btn {
	flex: 0 0 auto;
}

.web-tool .wt-strength {
	padding: 10px 14px;
	border-top: 1px solid var(--wt-border);
	background: var(--wt-bg);
}

.web-tool .wt-strength .progress {
	height: 8px;
	margin: 6px 0 0;
	box-shadow: none;
}

.web-tool .wt-regen {
	margin-top: 4px;
}

/* hex dump */

.web-tool .wt-hexdump td {
	white-space: pre;
	word-break: normal;
}

.web-tool .wt-hexdump td:first-child {
	color: var(--wt-muted);
}

.web-tool .wt-hexdump .table-responsive {
	max-height: 420px;
	overflow: auto;
	margin: 0;
	border: 0;
}

/* how it works */

.web-tool-how {
	margin-top: 10px;
}

.web-tool-how ul {
	padding-left: 0;
	list-style: none;
}

.web-tool-how li {
	position: relative;
	padding: 4px 0 4px 26px;
}

.web-tool-how li .glyphicon {
	position: absolute;
	left: 0;
	top: 7px;
	color: #2e9e5b;
}

@media (max-width: 991px) {
	.web-tool .wt-pane textarea {
		min-height: 200px;
	}

	.web-tool .wt-toolbar-end {
		margin-left: 0;
	}

	.web-tool .wt-error {
		margin-left: 0;
		flex-basis: 100%;
	}
}

.web-tool-password, .web-tool-jwt, .web-tool-uuid {
	margin-top: 28px;
}