.sbPage, .sbDrawer, .sbPageHolder, .sbDrawerHolder, .sbTrashBin, .sbCopyPasteBar, .sbContext, .sbPickerOptions {
	user-select: none;
	box-sizing: border-box;

	margin: 0;
	padding: 0;

	font-family: 'Open Sans', 'sans-serif';
	font-size: 15px;
}

/*
These styles were installed via installStyles prior to 11/2017
Moved them from blockView.js to scriptBlocks.css
*/

/* warning - do not change these variables without changing the corresponding variables in BlockView.js */
:root {
	--minHeight: 16px;
	--fontSize: 14px;
	--lineHeight: 1.3;
	--fontFamily: "Arial";
	--hNotchHeight: 5px;
	--barHeight: 8px;
}

.sbBlock {
	position: relative;
	vertical-align: middle;
	display: block;
	height: auto;
	width: auto;
	min-width: 28px;
	min-height: var(--minHeight);
	padding: 0;
	text-align: left;
	margin: 0;
	box-sizing: border-box;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	line-height: var(--lineHeight);
}

.sbBlockElement {
	pointer-events: none;
}

.sbBlockLine, .sbInternalInput, .sbButton, .sbList, .sbBottomBlockLine {
	pointer-events: all;
}


.sbAfterSocket {
	min-height: var(--hNotchHeight);
	width: auto;
	height: auto;
	display: inline-block;
	min-width: 26px;
	float: left;
	clear: both;
}

.sbAfterSocket > .sbBlockElement {
	margin-top: -1px !important;
}

.sbReturnBlock {
	padding-left: 10px;
}

.sbBlockLine {
	padding: 1px 7px;
	margin: 0;
	white-space: nowrap;
	width: auto;
	display: inline-block;
}

.sbBlockLine > * {
	vertical-align: middle;
	margin: 0 0 0 5px;
}

.sbBlockLine > div:first-child {
	margin-left: 0;
}

.sbBlockLine > input:first-child {
	margin-left: 0;
}

.sbTopBlockLine {
	padding-top: 3px;
}

.sbTopBlock > .sbTopBlockLine:first-child {
	padding-top: 5px;
}

.sbBeforeConBlock > .sbTopBlockLine:first-child {
	padding-top: 5px;
}

.sbBottomBlockLine {
	clear: both;
	padding-bottom: 3px;
}

.sbLabel {
	white-space: nowrap;
	cursor: default;
	display: inline;
	padding: 0;
	line-height: var(--lineHeight);
}

.sbEditableLabel {
	display: inline-block;
	background-color: transparent;
	border: none;
	width: 80px;
	padding: 1px;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	line-height: var(--lineHeight);
}

.sbEditableLabel:hover {
	border: 1px dashed #FFF;
	padding: 0;
}

sbEditableLabel:focus {
	background-color: #FFF;
	border: 1px dashed #999;
	padding: 0;
	-moz-user-select: text;
}

.sbSocket {
	position: relative;
	height: auto;
}

.sbInternal {
	display: inline-block;
	padding: 0 2px 0 0;
	margin: 0 0 0 3px;
}

.sbInternalInput {
	vertical-align: top;
	background-color: transparent;
	border: none;
	margin: 0 0 0 10px;
	padding: 0 2px;
	min-width: 20px;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	line-height: var(--lineHeight);
}
.sbInternalInput::placeholder {
	font-style: italic;
}

.sbList {
	display: inline-block;
	padding: 0;
	line-height: var(--lineHeight);
}


.sbList select {
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	line-height: var(--lineHeight);
}

.sbHilight {
	box-shadow: inset 0 0 2em gold;
}

.sbNested {
	display: inline-block;
	border: 0;
	padding: 0;
	height: auto;
	width: 26px;
	vertical-align: top;
	min-height: var(--minHeight);
}

/* Sets the height of the bar that comes after a nested socket */
.sbAfterBar {
	display: block;
	height: var(--barHeight);
}

/* Sets the height of the bottom of the C bar that comes after a nested socket,
	to make the height of the bottom bar match the height of internal afterBars,
	add more height since some of the height in an afterBar is the top padding in the block line around the nested socket after it
*/
.sbBottomBlockLine.sbAfterBar {
	height: calc(var(--barHeight) + 2px);
}

.sbEdge {
	display: inline-block;
	border: 0;
	padding: 0;
	height: auto;
	margin: -1px 0 0 0;
	vertical-align: top;
	width: 10px; /* sb.BlockView.notchWidth + 1*/
	min-height: 11px;
}

/*
END OF PREVIOUSLY INSTALLED STYLES
*/

.sbUnselectable {
	user-select: none;
}

.sbWorkspace {
	position: relative;
	overflow: hidden;
	min-width: 500px;
	min-height: 400px;
}

.sbWorkspaceMeasurement {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}


.sbDrawers {
	padding-top: 30px; /* leave room for the drawerPicker at the top */
	overflow: auto;
	height: 100%;
	box-sizing: border-box;
}

.sbDrawer {
	position: relative;
	padding: 5px 0 10px 5px;
	overflow: hidden;
}

.sbDrawerCTA {
	display: none;
	visibility: hidden;
	color: #000;
	text-shadow: none;
}

.sbDrawerCTA:only-child {
	display: initial;
	visibility: visible;
}

.sbDrawerCTA p {
	margin-top: 1rem;
}

.sbCopyBtn,
.sbCutBtn,
.sbPasteBtn {
	display: block;
	width: 30px;
	height: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 18px 18px;
	pointer-events: none;
}

.sbCopyBtn {
	background-image: url('img/copy.png');
}

.sbCutBtn {
	background-image: url('img/cut.png');
}

.sbPasteBtn {
	background-image: url('img/paste.png');
}

.sbBtnWrapper {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 2px 4px;
	border: 1px solid #b8b8b8;
	border-radius: 2px;
	color: black;
	background: #d4d4d4;
	cursor: pointer;
	transition: background 0.3s ease;
}

.sbBtnWrapper:hover {
	color: #124d77;
	background-color: #dddddd;
}

.sbCopyBtnWrapper:active .sbCopyBtn {
	background-image: url('img/copy_blue.png');
	background-position: center;
}

.sbBtnText {
	display: block;
	text-align: center;
	font-size: smaller;
	line-height: 1;
	cursor: pointer;
	pointer-events: none;
}

.sbCutBtnWrapper:active .sbCutBtn {
	background-image: url('img/cut_blue.png');
	background-position: center;
}

.sbPasteBtnWrapper:active .sbPasteBtn {
	background-image: url('img/paste_blue.png');
	background-position: center;
}

.sbBtnWrapper:active {
	background-color: #c7d6e6;
}

.sbToolBar {
	height: auto;
	right: 1px;
	position: absolute;
	z-index: 100;
}

.sbSticky.sbFixed {
	position: fixed !important;
	height: auto;
}

.sbTrashBinOpen {
	background-color: #E8ACAF;
	border: 3px dashed #F22260;
}

.sbSelection {
	position: absolute;
	border: 2px dashed #9C6;
}


.sbHidden {
	display: none;
}

.sbContext {
	position: absolute;
	cursor: default;
	z-index: 99;
	height: auto;
	width: auto;
}

.sbContext ul {
	padding: 0;
	border-radius: 5px;
	border: 1px solid grey;
	box-shadow: 2px 2px 2px #888888;
	overflow: hidden;
	margin: 0;
}

.sbContext li {
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	color: black;
	background: #F3F3F3;
	border-bottom: 1px solid grey;
	font-family: 'Arial';
	font-size: 12px;
	white-space: nowrap;
}

.sbContext li:hover {
	background: #1a85ff;
	color: #FFF;
}

.sbContext div {
	display: block;
	position: absolute;
}

.sbContext li.disabled {
	color: gray;
	background: #F3F3F3;
}

.sbContext li.disabled:hover {
	border: 0;
	background: #F3F3F3;
}

.sbPicker, .sbPickerOptions {
	background: #F3F3F3;
	cursor: pointer;
}

.sbPickerLabel {
	display: inline-block;
}

.sbPicker {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	box-sizing: border-box;
	vertical-align: middle;
	z-index: 1;
	padding: 3px 10px;
	font-size: 14px;
	font-weight: bold;
	border-radius: 0;
	border: 1px #BBB solid;
	border-bottom-color: white;
}

.sbPickerOptions {
	height: 0;
	box-sizing: border-box;
	overflow-y: hidden;
	box-shadow: 0 0 10px #888888;
	position: fixed;
	z-index: 2000 !important;
	transition: height .5s;
}

.sbPickerOptions::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 7px;
}

.sbPickerOptions::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background-color: rgba(0,0,0,.5);
}

.sbPickerOptions ul {
	display: block;
	padding: 0;
	overflow: hidden;
	margin: 0;
}

.sbPickerOptions li {
	display: block;
	padding: 5px 10px;
	border-bottom: 1px solid grey;
	white-space: nowrap;
}

.sbPickerOptions li:hover {
	position: relative;
}

.sbPicker:hover .sbPickerLabel, .sbPickerOptions li:hover .sbOptionText {
	position: absolute;
	top: 1px;
	left: 10px;
	font-size: 120%;
	font-weight: bolder;
}

.sbPickerOptions li:hover .sbOptionText {
	left: 30px;
	top: 3px;
}

.sbOptionText {
	display: inline-block;
	pointer-events: none;
}

.sbExpanded.sbPickerOptions {
	visibility: inherit;
	overflow-y: auto;
	border-radius: 5px;
	border: 1px solid grey;
}

.sbExpanded.sbBelow {
	border-top: none;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.sbExpanded.sbAbove {
	border-bottom: none;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.sbCaret {
	float: right;
	display: inline-block;
}

.sbCaret:before {
	content: '\25BE';
}

.sbExpanded .sbCaret:before {
	content: '\25B4';
}

.sbCheckmark {
	display: inline-block;
	margin-right: 10px;
	pointer-events: none;
	visibility: hidden;
}

.sbChecked .sbCheckmark {
	visibility: inherit;
}

/* Optimization for block dragging performance */
body.sb-dragging .sbBlock {
	pointer-events: none;
}

body.sb-dragging .sbBlock * {
	pointer-events: none;
}

.sbHiddenList {
	display: inline-block;
	padding: 0px;
	line-height: var(--lineHeight);
}

.sbHiddenList select {
	text-align: center;
	vertical-align: middle;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	line-height: var(--lineHeight);
	font-weight: bold;
	font-size: 15px;
	color: #fff;
	margin: 1px;
	text-shadow:
	0.707px 0.707px 0 #000,
	-0.707px -0.707px 0 #000,
	0.707px -0.707px 0 #000,
	-0.707px 0.707px 0 #000,
	1px 0px 0 #000,
	-1px 0px 0 #000,
	0px -1px 0 #000,
	0px 1px 0 #000;
	box-sizing: border-box;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
}

.sbHiddenList select:hover{
	border: solid var(--hiddenlist-border-color) 1px !important;
}