.displayFlex {
	display: flex;
}

.tabbedwidget
{
	border-top-left-radius:0!important;
}

.widget > :last-child {
	border-radius: 0 0 10px 10px;
	margin-bottom: 0;
	padding-bottom: 0px;
}

.widget h2
{
	margin-top:0;
	padding-left:10px;
	padding-top:5px;
}

.widget p
{
	background-color:#EBEBEB;
	padding:5px 20px;
}

.widget
{
	-moz-box-shadow:0 0 7px #5F5F5F;
	-webkit-box-shadow:0 0 7px #5F5F5F;
	background-color:#F5F5F5;
	border-radius:10px;
	border-style:solid;
	border-width:.5px;
	box-shadow:0 0 7px #5F5F5F;
	color:#000;
	padding:1px;
}

.widget-body
{
	background:#EBEBEB;
	flex:1 1 auto;
	overflow-y:scroll;
}

.widget-tab
{
	background-color:#E0E0E0;
	border-style:solid;
	border-top-left-radius:10px;
	border-top-right-radius:10px;
	border-width:.5px;
	box-shadow:0 0 7px #5F5F5F;
	color:#5F5F5F;
	font-size:21px;
	font-weight:500;
	line-height:28px;
	padding-left:13px;
	padding-right:13px;
	padding-top:0;
	z-index:0;
}

.widget-tab-active
{
	background-color:#F5F5F5;
	color:#000;
	z-index:2;
}

.widget-tab-active:after
{
	background-color:#F5F5F5;
	box-sizing:content-box;
	content: "";
	height:8px;
	margin-bottom:-8px;
	margin-left:-13px;
	padding-left:13px;
	padding-right:13px;
	width:100%;
}

.widget-tab:hover
{
	background-color:#EBEBEB;
	color:#5F5F5F;
	cursor:pointer;
	text-decoration:none;
}

.widget-tabrow {
	display: flex;
	margin-bottom: -1px;
}


.widgetrow {
  display: flex;  
}

.widgetrow-margin {
	margin: 0 20px 20px 20px;
}

.widget-tab:active, .widget-tab:link, .widget-tab:visited {
	color: #5F5F5F;
	text-decoration: none;
}

.widget-row-height {
	height: 34em;
}

.widget-item-height {
	height: 30em;
}

.widget-scroll-button {
	font-size: 16px;
	cursor: pointer;
	display: none; /* JS will toggle */
	transition: background 0.2s;
}

	.widget-scroll-button:hover {
		background: #f0f0f0;
	}

.widget-scroll-container {
	display: inline-flex;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	white-space: nowrap !important;
	scrollbar-width: none; /* Firefox */
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

	.widget-scroll-container::-webkit-scrollbar {
		display: none; /* Chrome, Safari */
	}

.widget-tab-container {
	position: relative;
}
	/* .widget-tab-active class from Widget.css is introducing pointer_events:none which upholds the css engine to invoke user events.
The below styling rule is overwriting the rule by using the parent widget tab container. */
	.widget-tab-container.widget-tab-active {
		background-color: #F5F5F5;
		color: #5F5F5F;
		pointer-events: all;
	}

	.widget-tab-container a:focus {
		color: #5F5F5F;
		text-decoration: none;
	}

.tab-link {
	color: #5F5F5F;
	display: inline-block;
	padding: 0 1em 0 0;
	text-decoration: none;
}

	.tab-link:hover {
		color: #5F5F5F;
		text-decoration: none;
	}

.tab-close {
	position: absolute;
	right: 5px;
	border: none;
	border-radius: 4px;
	background: none;
	font-size: 18px;
	color: #5F5F5F;
	padding: 0 6px 0 6px;
}

	.tab-close:hover {
		cursor: pointer;
		background-color: #E0E0E0;
	}

.tab-locked-active {
	border-bottom: none;
	box-shadow: none;
}