:root{
	--highlightColor:rgba(165,30,30,0.8);
	--backgroundColor: rgba(90,90,90,0.9);
	--normalTextColor: #E4E4E4;
	--invertedTextColor: #1A1A1A; 
	--totalPanelWidth:640px;
	--linkColor: rgba(175,40,40,1);
}
/**************************************************************************
							hacking standard
***************************************************************************/
.sapUiIcon{
	color: #E4E4E4 !important;
	color:var(normalTextColor) !important;
}
.sapMToggleBtnPressed{
	background-color: rgba(165,30,30,0.8) !important; /*hardcoded IE and EDGE*/
	border-color: rgba(165,30,30,0.8) !important; /*hardcoded IE and EDGE*/;
	background-color:	var(--highlightColor) !important;
	border-color:		var(--highlightColor) !important;
}
.sapMToggleBtnPressed:focus{
	background-color: rgba(165,30,30,0.8) !important; /*hardcoded IE and EDGE*/
	border-color: rgba(165,30,30,0.8) !important; /*hardcoded IE and EDGE*/;
	background-color:	var(--highlightColor) !important;
	border-color:		var(--highlightColor) !important;
}
.sapUiFormTitle{ /*annoying text shadow makes it hard to read when using different colors*/
	text-shadow:none !important;
}
.sapMTitle{ /*annoying text shadow makes it hard to read when using different colors*/
	text-shadow:none !important;
}
.sapMPage>section{ /*annoying fact that it's absolute and won't consider padding*/
	position:relative !important;
	padding:0.5em;
	width: auto !important;
	height:100%;
}
.sapUiFormResLayout>div{
	padding:0 !important;
}
.sapMLnk, .sapMLnk:hover, .sapMLnk:visited, .sapMLnk:active {
	color:rgba(220,80,80,1.0) !important;
	font-weight:bold;
}
h1,h2,h3,H4,h5,p,span,div, .fiddleText{
	color: #E4E4E4 !important;
	color: var(--normalTextColor) !important;
}
.inverted{
	color: #1A1A1A !important;
	color:var(--invertedTextColor) !important;
}
.inverted h1,
.inverted h2,
.inverted h3,
.inverted H4,
.inverted h5,
.inverted p,
.inverted span,
.inverted div,
.inverted .sapMSelectListItem,
.sapMSelectListItem{
	color: #1A1A1A !important;
	color:var(--invertedTextColor) !important;
}

.fiddleFiller{height:100vw;}

.fiddleArticles .sapMFlexItem{
	margin-left:auto;
	margin-right:auto;
}
a{
	color:rgba(175,40,40,1) ;/*IE and EDGE*/
	color:var(--linkColor);
	text-decoration:none;
}
.noScroll{
	overflow-x:hidden;
	overflow-y:hidden;
}
/**************************************************************************
							Main content
***************************************************************************/
.fiddleContent{
	overflow:hidden;
	position:fixed;
	Left:0;
	right:0;
	width:100%;
	height:100%;
	background-size: cover;
	
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;	
}
.sap-desktop .fiddleContent{
	background-image:url("../res/fiddle-lrg.png") !important;
	background-size: cover;
}
.sap-table .fiddleContent{
	background-image:url("../res/fiddle-med.png") !important;
	background-size: cover;
}
.sap-phone .fiddleContent{
	background-image:url("../res/fiddle-sml.png") !important;
	background-size: cover;
}
/**************************************************************************
							swipe animations
***************************************************************************/
.fiddleLeftHidden{ /*"hidden" to the left*/
	transform: scale(0.8);
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	
	height:120%;
	
	-webkit-transform-origin : left top;
    -moz-transform-origin : left top;
    -o-transform-origin :left top;
    -ms-transform-origin : left top;
    transform-origin : left top;	
}
.fiddleRightHidden{  /*"hidden" to the right*/
	transform: scale(0.8);
	-moz-transform: scale(0.8);
	-webkit-transform: scale(0.8);
	-o-transform: scale(0.8);
	-ms-transform: scale(0.8);
	
	height:120%;
	
	-webkit-transform-origin : 100% 0%;
    -moz-transform-origin : 100% 0%;
    -o-transform-origin :100% 0%;
    -ms-transform-origin : 100% 0%;
    transform-origin : 100% 0%;	
}
/**************************************************************************
							header area
***************************************************************************/
.fiddleHeader{
	position: fixed;
	margin:0;
	top:0em;
	width:100%;
	height:3em;
}
.fiddleHeader::before{
	content: "";
	position: absolute;
	width: 100%;
	top: 0;
	border-top: 0.25em solid rgba(165,30,30,0.8) ; /*hardcoded IE and EDGE*/;
	border-top: 0.25em solid var(--highlightColor);
	z-index: 7;
}
.fiddleHeaderContent{
	color: #E4E4E4 !important;
	color:var(--normalTextColor) !important;
}
.fiddlePageHeader::before{
	content: "";
	position: absolute;
	width: 100%;
	top: 0;
	border-top: 0.25em solid rgba(165,30,30,0.8) ; /*hardcoded IE and EDGE*/;
	border-top: 0.25em solid var(--highlightColor);
	z-index: 7;
	margin-bottom:1em;
}
.fiddlePageHeader{
	padding: 0 !important ;
}
/**************************************************************************
								main shell
***************************************************************************/
.fiddleShell{
	position: fixed;
	left:0;
	right:0;
	width:auto;
	top:4em;
	bottom:0em;
	height:auto;
	margin-top:0em;

	overflow-y:hidden;
	overflow-x:hidden;

	transition: all 0.8s ease;
	-moz-transition: all 0.8s ease;
	-ms-transition: all 0.8s ease;
	-webkit-transition: all 0.8s ease;
	-o-transition: all 0.8s ease;	
}
.sap-phone .fiddleShell{
	min-width:960px;
}
.sap-tablet .fiddleShell{
	min-width:1120;
}
@media screen and (max-width: 1280px) {
    .sap-desktop .fiddleMain {
    	margin-left:10vw;
    	margin-right:10vw;
    	width:80vw;
    }
}
/**************************************************************************
							sidepanel area
***************************************************************************/
/* Navigation bar needs to be transparent, and in collapsed mode, at least 64px wide */
.fiddleSidePanel{
	transition: all 0.5s ease ;
	-moz-transition: all 0.5s ease ;
	-ms-transition: all 0.5s ease ;
	-webkit-transition: all 0.5s ease ;
	-o-transition: all 0.5s ease ;
	
	overflow:hidden;
	position:relative;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;

	margin:0;
	width:320px !important;
	min-width:320px;
}
.fiddleUser, .fiddleRight{
	overflow-y:scroll !important;
	overflow-x:hidden;
	width:320px;
	
	position:absolute;
	top:0px;
	bottom:0px;
	right:-18px;
}

/**************************************************************************
							navigation item
***************************************************************************/
.fiddleNaviItem{
	width:320px !important;
	margin:0px 0px 6px 1em;
	border:none;
}
.fiddleNaviItem:active, .fiddleNaviItem:focus , .fiddleNaviItem:hover{
	background:rgba(165,30,30,0.8) !important;
	margin:0px 0px 6px 2em;
	border:none;
}
/**************************************************************************
							Notification item
***************************************************************************/
.fiddleNotiItem{
	margin:0px 0px 6px 0px;
	padding:0 0px;
	background-color: rgba(255,255,255,0.0) !important;
}
.fiddleNotiItem .sapMPanelBGTranslucent{
	background-color:rgba(255,255,255,0.0);
}

/**************************************************************************
							content area
***************************************************************************/
.fiddleMain{
	position:relative;
/*	height:100%;*/

/*width will be recalculated by javascript*/
	width:100%;
	width: calc( 100vw - 640px );
	width: -moz-calc(100vw - 640px );
	width: -webkit-calc(100vw - 640px );
	
	color: #E4E4E4 !important;
	color:var(--normalTextColor);
	border-style:none;
	
	padding-left:0.5em;
	padding-right:0.5em;
	
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;	
}
.sap-desktop .fiddleMain{
	min-width:640px;
}
.sap-tablet .fiddleMain{
	min-width:480px;
}
.sap-phone .fiddleMain{
	min-width:320px;
	width:100vw;
}

.fiddleView{
	position: absolute;
	top:0em;
	bottom:2em;
	left:0px;
	right:0px;

	overflow:hidden;
	height:auto;
	width:auto !important;
}
/**************************************************************************
							article block
***************************************************************************/
.fiddleArticle{
	width: auto;  
	height: auto;  
	border-style: none;  
	overflow:hidden;
	font-size:0.9rem;
	margin-bottom:1rem;
}
.sap-phone .fiddleArticle{
	width:95vw;
}
.fiddleArticle:focus{
	box-shadow: 0 0 0 0.250em rgba(165,30,30,0.8);
	background-color: rgba(90,90,90,0.9); /*hardcode for IE and edge*/
	background-color: var(--backgroundColor);  
}
.fiddleTitle{
	font-size:1em;
	font-weight:bold;
	width:100%;
	max-width:100% !important; /*damn you standard max-width*/
	background-color:rgba(255,255,255,0.8) !important;
}
.fiddleScroll{
	position:absolute;
	top:0px;
	bottom:0px;
	left:0.5em; 
	right:-18px !important;
	overflow-X:hidden !important;
	overflow-Y:scroll!important;
	width:auto !important;
	height:auto !important;
	/*padding: 0.5em;*/
	
	transition: all 1s ease;
	-moz-transition: all 1s ease;
	-ms-transition: all 1s ease;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;		
}
.fiddleArticles{
	overflow-X:hidden;
	width:100%;
	height:100%;

	flex-wrap:wrap !important;
	-ms-flex-wrap:wrap !important;
}
.jive-rendered-content{
	position:absolute;
	left:0px;
	right:0px;
	width:auto;
}
/**************************************************************************
							groups block
***************************************************************************/
.fiddleGroup{
	margin-bottom:1em;
/*	margin-left:1em;
	margin-right:1em;*/
}
/**************************************************************************
							Blurred area
***************************************************************************/
.fiddleBlock{
	background-color: rgba(90,90,90,0.9) !important; /*hardcode for IE and edge*/;
	background-color: var(--backgroundColor) !important; /* rgba(90,90,90,0.9) !important; */
	-webkit-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	-moz-box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	--webkit-backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.fiddleBlockNoShadow{
	background-color: var(--backgroundColor) !important; /* rgba(90,90,90,0.9) !important; */
	--webkit-backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
}
.sapMBtnDefault{
	background: rgba(90,90,90,0.9) !important ;
	background-color: rgba(90,90,90,0.8) !important; /*hardcode for IE and edge*/;
	background-color: var(--backgroundColor) !important; /* rgba(90,90,90,0.9) !important; */
}
.sapMBtnDefault:hover{
	background:rgba(165,30,30,0.8) !important;
	background-color:rgba(165,30,30,0.8) !important;
}