///////////////////////////////////////////////////////////////////////////////
// Box Model
///////////////////////////////////////////////////////////////////////////////
html {
	height: 100%;
	box-sizing: border-box;
}

*,
*:before,
*:after {box-sizing: inherit;}

////////////////////////////////////////////////////////////////////////////////
// .wrapper
////////////////////////////////////////////////////////////////////////////////
.wrapper {
	max-width: 1100px;
	margin-block: 0 auto;
}

////////////////////////////////////////////////////////////////////////////////
// General styles
////////////////////////////////////////////////////////////////////////////////
body {
	height: 100%;
	font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
	font-weight: 400;
	color: var(--gray-20);
}

a,
.link {
	color: var(--brand-primary-30);
	cursor: pointer;
}

a:hover,
.link:hover {
	color: var(--brand-default)
}

.fa {user-select: none;}

////////////////////////////////////////////////////////////////////////////////
// .navbar-default
////////////////////////////////////////////////////////////////////////////////
.navbar-default {
	background-color: var(--gray-95);
	border-color: var(--border-default);
}

////////////////////////////////////////////////////////////////////////////////
// .mainContent
////////////////////////////////////////////////////////////////////////////////
.mainContent {
	padding-top: 50px;
	height: 100%;
}

////////////////////////////////////////////////////////////////////////////////
// .header-actions
////////////////////////////////////////////////////////////////////////////////
.header-actions {
	margin-top: 20px;
}

.header-actions .docs-icon {
	position: relative;
	top: 4px;
	font-size: 1.6em;
	margin-right: 12px;
}

////////////////////////////////////////////////////////////////////////////////
// .wrapper
////////////////////////////////////////////////////////////////////////////////
.wrapper {
	max-width: 1200px;
	padding: 0 20px;
	margin: 0 auto;
}

////////////////////////////////////////////////////////////////////////////////
// .element-holder
////////////////////////////////////////////////////////////////////////////////
.elements-holder {
	position: fixed;
	top: 50px;
	bottom: 0;
	left: 0;
	max-width: 150px;
	padding: 12px;
	border-right: 1px solid var(--border-default);
	background-color: var(--gray-95);
	user-select: none;
}

.elements-holder .elements-list {
	float: none;
	width: 125px;
	border: none;
}

.elements-holder .elements-list .elements {
	background-color: transparent;
}

////////////////////////////////////////////////////////////////////////////////
// ..elements-holder support-banners-list
////////////////////////////////////////////////////////////////////////////////

// Hide by default
.elements-holder support-banners-list {display: none;}

// Only show if screen height is larger enough to show all items from
// .elements-list in conceptual workspace (The one with more elements)
@media screen and (min-height: 620px) {
	.elements-holder support-banners-list {
		display: block;
		position: fixed;
		bottom: 0;
		z-index: 1;
	}
}

////////////////////////////////////////////////////////////////////////////////
// .stencil-paper-drag
////////////////////////////////////////////////////////////////////////////////
.draggable-paper.dragging {
    opacity: .7;
 }

////////////////////////////////////////////////////////////////////////////////
// .model-area
////////////////////////////////////////////////////////////////////////////////
.model-area {
	position: absolute;
	top: 50px;
	right: 0;
	bottom: 0;
	left: 150px;
	overflow: hidden;
	box-sizing: border-box;
}

.workspace-header {
	position: relative;
}

.workspace-header .page-header {
	padding: 0 15px;
	margin-top: 8px;
	margin-bottom: 0;
}

.workspace-header .page-header .header-actions {
	margin-top: 0;
}

////////////////////////////////////////////////////////////////////////////////
// .document-info
////////////////////////////////////////////////////////////////////////////////
.document-info {
	max-width: calc(100% - 300px);
}

.document-info h2 {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin-bottom: 4px;
}

////////////////////////////////////////////////////////////////////////////////
// .model-properties
////////////////////////////////////////////////////////////////////////////////
.model-properties {
	position: fixed;
	z-index: 10;
	top: 112px;
	right: -348px;
	bottom: 0;
	width: 360px;
	border-top: 1px solid var(--border-default);
	border-left: 1px solid var(--border-default);
	background-color: var(--gray-95);
	transition: 0.3s ease-in-out right;
}

.model-properties.active {right: 0;}

.model-properties .action {
	display: block;
	position: absolute;
	top: 12px;
	left: -36px;
	padding: 6px 12px 10px 12px;
	text-align: center;
	border: 1px solid var(--border-default);
	border-radius: 3px 0 0 3px;
	background-color: var(--gray-95);
	cursor: pointer;
}

.action .angle-double-icon {
	position: relative;
	top: 3px;
	font-size: 1.3em;
	color: var(--gray-30);
	font-weight: bold;
}

.properties-content {
	height: 100%;
	padding: 12px;
	overflow-y: scroll;
	scrollbar-width: none;
}

.properties-content::-webkit-scrollbar {
	display: none;
}

.properties-content.old {
	padding: 16px;
}

.properties-content .empty-state {
	padding: 24px 0;
	font-size: 1.3em;
	font-weight: 200;
	text-align: center;
	color: var(--gray-20);
}

.properties-content .br-button {
	text-align: center;
	width: 100%;
}

////////////////////////////////////////////////////////////////////////////////
// .editionColumn
////////////////////////////////////////////////////////////////////////////////
.editionColumn {
	margin-top: 5px;
}

.editionColumn .editionItem {
	margin-bottom: 5px;
}

.editionItem .fieldInput {
	padding: 2px 5px;
	font-size: 1.0em;
}

////////////////////////////////////////////////////////////////////////////////
// .editor-scroller
////////////////////////////////////////////////////////////////////////////////
.editor-scroller {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: scroll;
}

.editor-scroller .joint-paper {
	position: absolute;
	box-shadow: 0 0 20px rgba(0,0,0, 0.1);
	// background-color: purple; // Uncomment to debugging purposes
}

.editor-scroller .joint-paper > svg {
	display: block;
}

.editor-scroller[data-cursor=grab] {
	cursor: grab;
}

.editor-scroller[data-cursor=grab].is-panning {
	cursor: grabbing;
}

////////////////////////////////////////////////////////////////////////////////
// .page-header (Overwrite bootstrap)
////////////////////////////////////////////////////////////////////////////////
.page-header {
	border-color: var(--border-default);
}