@font-face { font-family: 'Merkur Sans'; src: url(/frameworks/merkursans-webfonts/MerkurSans-Light.woff2) format('woff2'); font-weight: 300; font-style: normal }
@font-face { font-family: 'Merkur Sans'; src: url(/frameworks/merkursans-webfonts/MerkurSans-Black.woff2) format('woff2'); font-weight: 900; font-style: normal }
@font-face { font-family: 'Merkur Sans'; src: url(/frameworks/merkursans-webfonts/MerkurSans-LightItalic.woff2) format('woff2'); font-weight: 300; font-style: italic }
@font-face { font-family: 'Merkur Sans'; src: url(/frameworks/merkursans-webfonts/MerkurSans-BlackItalic.woff2) format('woff2'); font-weight: 900; font-style: italic }
@font-face { font-family: 'Merkur Sans Condensed'; src: url(/frameworks/merkursans-webfonts/MerkurSans-CondensedLight.woff2) format('woff2'); font-weight: 300; font-style: normal }
@font-face { font-family: 'Merkur Sans Condensed'; src: url(/frameworks/merkursans-webfonts/MerkurSans-CondensedBlack.woff2) format('woff2'); font-weight: 900; font-style: normal }
@font-face { font-family: 'Twemoji Country Flags'; src: url(/frameworks/merkursans-webfonts/TwemojiCountryFlags.woff2) format('woff2'); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; font-display: swap }
body, .popover { font-family: 'Merkur Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important }
.windows-flags { font-family: 'Twemoji Country Flags', 'Merkur Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important }

html { scroll-padding-top: 100px }
body { padding-top: 100px }

.mflogo-merkur { font-weight: 900 !important; color: #E83181 !important }
.mflogo-flow-pos, .mflogo-flow-always-pos { font-weight: 300 !important; color: #022052 !important }
.mflogo-flow-neg { font-weight: 300 !important; color: #FFF !important }

@media screen {
	body {
		background-image: 
			linear-gradient(rgba(255, 255, 255, 0.01), rgb(255, 255, 255) 85%), 
			radial-gradient(at left top, rgba(13, 110, 253, 0.5), transparent 50%), 
			radial-gradient(at right top, rgba(255, 228, 132, 0.5), transparent 50%), 
			radial-gradient(at right center, rgba(113, 44, 249, 0.5), transparent 50%), 
			radial-gradient(at left center, rgba(214, 51, 132, 0.5), transparent 50%);
		background-repeat: no-repeat;
		background-size: 100% 500px
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-image: 
			linear-gradient(rgba(33, 37, 41, 0.01), rgb(33, 37, 41) 85%), 
			radial-gradient(at left top, rgba(13, 110, 253, 0.3), transparent 50%), 
			radial-gradient(at right top, rgba(255, 228, 132, 0.3), transparent 50%), 
			radial-gradient(at right center, rgba(113, 44, 249, 0.3), transparent 50%), 
			radial-gradient(at left center, rgba(214, 51, 132, 0.3), transparent 50%);
		background-color: #212529
	}
	.mflogo-flow-pos { color: #FFF !important }
	.table-primary { --bs-table-bg: #343A40; --bs-table-color: rgba(173, 181, 189, 0.75) }
}

.resize-none { resize:none }

.navbar { background-color: #022052; border-bottom: solid 5px #E83181 }
.navbar-dark { --bs-navbar-color:#FC0 }
.navAvatar { display:inline }

.underline-on-hover { text-decoration: none }
.underline-on-hover:hover { text-decoration: underline }
.highlight-on-hover { background-color: transparent }
.highlight-on-hover:hover { background-color: #00000012 }



.null, .new-tag, .adopted-tag { font-size:.8em; color: var(--bs-secondary); border:1px solid var(--bs-secondary) }



	.new-tag { background:var(--bs-warning) }
.adopted-tag { background:#0000000f }




.table-mini-button { --bs-btn-font-size: .75rem; --bs-btn-padding-y: 0; --bs-btn-padding-x: .7rem }

.visually-group-with-next-tight td { padding-bottom:0; border-bottom:0 }
.visually-group-with-next td { border-bottom:0 }

.avatar { display: inline-block; text-align: center; margin-left: .1rem; transition: transform .2s }
.avatar a, .avatar span { text-decoration: none }
.avatar:hover { box-shadow: rgba(0, 0, 0, 0.88) 0px 1px 4px, var(--bs-secondary) 0px 0px 0px 2px; transform: scale(1.08) translateY(-.13rem); font-weight: bold }
.avatar-small { height: 2rem; width: 2rem; line-height: 2rem; font-size: .8rem }
.avatar-large { height: 3rem; width: 3rem; line-height: 3rem; font-size: 1.3rem }
.avatar-huge { height: 7rem; width: 7rem; line-height: 7rem; font-size: 3.3rem }
.avatar-pm { border-radius: 50% }
.avatar-csuite { border-radius: 50% 0 0 50% }
.avatar-pggd { border-radius: 0 0 50% 50% }
.avatar-gd { border-radius: 0 }
.avatar-dev { border-radius: 0 50% 50% 0 }
.avatar-sales { border-radius: 50% 0 50% 0 }
.avatar-consumer { border-radius: 0 50% 0 0 }
.avatar-decolorized { filter: saturate(23%) }

#community-content hr { border-color: #E83181; opacity:100% }

.status-indicator-container { display:inline-block; border-bottom: 2px solid var(--bs-secondary-bg) }
.status-indicator { display:inline-block; width:.88em; border: 1px solid var(--bs-body-bg) }
.status-indicator-selected { border-color: var(--bs-secondary) }

.sic-1 { border-color:#9d0000 }
.sic-2 { border-color:#eb0000 }
.sic-3 { border-color:#ffcc00 }
.sic-4 { border-color:#ffee00 }
.sic-5 { border-color:#a2c617 }
.sic-6 { border-color:#51630c }

.sic-6 {
	--bs-btn-active-color: #fff;
	--bs-btn-border-color: #9d0000;
	--bs-btn-active-bg: #9d0000;
	--bs-btn-active-border-color: #9d0000;
	--bs-btn-disabled-color: #9d0000;
	--bs-btn-disabled-border-color: #9d0000;
}

.sic-5 {
	--bs-btn-active-color: #fff;
	--bs-btn-border-color: #eb0000;
	--bs-btn-active-bg: #eb0000;
	--bs-btn-active-border-color: #eb0000;
	--bs-btn-disabled-color: #eb0000;
	--bs-btn-disabled-border-color: #eb0000;
}

.sic-4 {
	--bs-btn-border-color: #ffcc00;
	--bs-btn-active-bg: #ffcc00;
	--bs-btn-active-border-color: #ffcc00;
	--bs-btn-disabled-color: #ffcc00;
	--bs-btn-disabled-border-color: #ffcc00;
}

.sic-3 {
	--bs-btn-border-color: #ffee00;
	--bs-btn-active-bg: #ffee00;
	--bs-btn-active-border-color: #ffee00;
	--bs-btn-disabled-color: #ffee00;
	--bs-btn-disabled-border-color: #ffee00;
}

.sic-2 {
	--bs-btn-border-color: #a2c617;
	--bs-btn-active-bg: #a2c617;
	--bs-btn-active-border-color: #a2c617;
	--bs-btn-disabled-color: #a2c617;
	--bs-btn-disabled-border-color: #a2c617;
}

.sic-1 {
	--bs-btn-active-color: #fff;
	--bs-btn-border-color: #51630c;
	--bs-btn-active-bg: #51630c;
	--bs-btn-active-border-color: #51630c;
	--bs-btn-disabled-color: #51630c;
	--bs-btn-disabled-border-color: #51630c;
}





.drop-zone { border-width: 4px !important; background: repeating-linear-gradient(135deg, #FFF4, #FFF4 10px, #FFF1 10px, #FFF1 20px) }
@media (prefers-color-scheme: dark) {
	.drop-zone { background: repeating-linear-gradient(135deg, #FFF2, #FFF2 10px, #FFF1 10px, #FFF1 20px) }
}





.color-selector-widget {
	display: inline-block;
	position: relative;
}
.color-preview {
	width: 38px;
	height: 38px;
}
.color-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.matrix-editor {
	height: calc(70vh - 80px)
}
.matrix-editor .content-area {
	background: repeating-linear-gradient(135deg, #FFF4, #FFF4 10px, #FFF1 10px, #FFF1 20px);
}
@media (prefers-color-scheme: dark) {
	.matrix-editor .content-area { background: repeating-linear-gradient(135deg, #FFF2, #FFF2 10px, #FFF1 10px, #FFF1 20px) }
}
.matrix-editor td, .matrix-editor th {
	border: 1px solid #ccc;
	padding: 8px;
	min-width: 100px;
	white-space: pre-wrap;
	background-color: var(--bs-body-bg)
}
.matrix-editor th {
	background-color: var(--bs-table-bg);
	color: var(--bs-table-color);
	font-weight: bold;
}
.matrix-editor td:focus:not(.modified), .matrix-editor th:focus:not(.modified) {
	background-color: var(--bs-highlight-bg);
	color: var(--bs-highlight-color);
	outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
}
.matrix-editor td:focus.modified, .matrix-editor th:focus.modified {
	background-color: rgba(var(--bs-primary-rgb), 0.75);
	color: var(--bs-white);
	outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
}
.matrix-editor .emoji-menu {
	max-height: 200px;
	overflow-y: auto;
}