/* ============================================= */
/* CSS for support popup window                  */
/* ============================================= */

.sapUiSupportBody {
	color: #000000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
	min-width: 700px;
}

.sapUiSupportHidden {
	display: none;
}

.sapUiSupportHdr {
	background-color: rgb(47, 60, 72);
	color: rgb(202, 228, 251);
	font-weight: normal;
}

button.sapUiSupportRoundedButton {
	border-radius: 3px;
	border: 1px solid;
	text-align: center;
	font-size: 14px;
	padding: 0.25rem 0.5rem;
	margin: 2px 0;
	box-sizing: border-box;
	background-color: #ffffff;
	border-color: #bfbfbf;
	color: #346187;
}

.sapUiSupportExportButton {
	margin-top: 5px;
	width: 180px;
}

button.sapUiSupportHelpButton {
	text-align: center;
	padding: 0.25rem 0.5rem;
	margin: 0 0.25rem;
	font-family: "SAP-icons";
	font-size: 17px;
	border: none;
	background-color: rgb(47, 60, 72);
	color: rgb(202, 228, 251);
	cursor: pointer;
}

button.sapUiSupportHelpButton:hover {
	background-color: rgba(99, 127, 153, 0.5);
}

.sapUiButtonsContainer {
	padding: 0.4rem 0.25rem;
	margin: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-content: center;
	align-items: center;
}

.sapUiButtonsContainer .title {
	flex: 1 1 auto;
	align-self: auto;
}

.sapUiButtonsContainer button.sapUiSupportRoundedButton {
	flex: 0 1 auto;
}

.sapUiSupportHdr > div {
	color: rgb(202, 228, 251);
	background-color: rgb(47, 60, 72);
	font-size: 18px;
	font-weight: normal;
	margin-left: 8px;
}

.sapUiSupportPnl {
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 5px;
}

.sapUiSupportCntnt {
	overflow: auto;
	width: 100%;
	min-width: 700px;
}

.sapUiSupportPnlHdr {
	color: #555;
	border-bottom: 1px solid #cbcbcb;
	height: 25px;
	font-weight: normal;
	font-size: 18px;
	padding: 0.5rem;
	position: relative;
	cursor: pointer;
}

.sapUiSupportPnlHdr:hover {
	color: #427CAC; /* indicate it is clickable */
}

.sapUiSupportPnlHdrHdl {
	cursor: pointer;
	height: 7px;
	width: 10px;
	display: inline-block;
}

.sapUiSupportPnlHdrHdl::before {
	font-family: "SAP-icons";
	speak: none;
	content: "\e1e2";
}

.sapUiSupportPnlHdr .sapUiSupportPanelTitle {
	display: inline-block;
	padding: 0 0.7rem;
}

.sapUiSupportPnlHdrHdl.sapUiSupportPnlHdrHdlClosed:before {
	font-family: "SAP-icons";
	speak: none;
	content: "\e0e3";
}

.sapUiSupportPnlCntnt {
	margin-bottom: 5px;
}

.sapUiSupportPnlCntntPad {
	padding-left: 5px;
	padding-right: 5px;
}

.sapUiSupportPlugin {
	overflow: auto;
	position: relative;
}

.sapUiSupportLink,
.sapUiSupportLink:active,
.sapUiSupportLink:focus,
.sapUiSupportLink:visited,
.sapUiSupportLink:hover {
	color: #0070b1;
	text-decoration: none;
	display: inline-block;
	font-size: 0.875rem;
}

.sapUiSupportLink:hover {
	text-decoration: underline;
}

.sapUiSupportLink.sapUiSupportLinkDsbl,
.sapUiSupportLink.sapUiSupportLinkDsbl:active,
.sapUiSupportLink.sapUiSupportLinkDsbl:focus,
.sapUiSupportLink.sapUiSupportLinkDsbl:visited,
.sapUiSupportLink.sapUiSupportLinkDsbl:hover {
	color: #999999;
	text-decoration: underline;
	cursor: default;
}

.sapUiSupportLabel {
	font-weight: normal;
	color: #666666;
	box-sizing: border-box;
	display: inline-block;
	padding: 0.25rem 0.5rem;
}

.sapUiSupportLabel img {
	vertical-align: middle;
	margin-left: 3px;
}

.sapUiSupportLabelBold {
	font-weight: bold;
}

.sapUiSupportToolbar {
	background-color: #F2F2F2;
	height: 31px;
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	box-sizing: border-box;
}

.sapUiSupportTxtFld {
	border: 1px solid #BFBFBF;
	font-size: 14px;
	box-sizing: border-box;
}

.sapUiSupportTab {
	border-width: 1px 1px 0 0;
	padding: 0.3rem 0.7rem;
	border-color: #ababab;
}

.sapUiSupportTabLeft {
	border-width: 1px 1px 0 1px;
	border-top-left-radius: 3px;
}

.sapUiSupportTabRight {
	border-top-right-radius: 3px;
}

.sapUiSupportTxtFld {
	background-color: #FFFFFF;
	padding: 1px;
}

.sapUiSupportTxtFld:hover,
.sapUiSupportTxtFld:focus {
	border-color: #427CAC;
}

.sapUiSupportRoundedButton:hover,
.sapUiSupportTab:hover {
	color: #346187;
	border-color: #bfbfbf;
	background-color: #ebebeb;
}

.sapUiSupportRoundedButton:active {
	color: #ffffff;
	border-color: #427cac;
	background-color: #427cac;
}

.sapUiSupportRoundedButton:focus,
.sapUiSupportTab:focus,
.sapUiSupportTab:active {
	color: #ffffff;
	background-color: #346187;
}

.sapUiSupportTechInfoBorder .sapUiSupportRoundedButton {
	margin-left: 10px;
}

.sapUiSupportTechInfoBorder table {
	width: 100%;
}

.sapUiSupportTechInfoXMLOutput {
	margin-top:5px;
}

.sapUiSupportTechInfoXMLOutput textarea {
	width: 100%;
	height: 50px;
	margin-top: 5px;
	resize: none;
	box-sizing: border-box;
}

.sapUiSupportPerfHeaderFilters .sapUiSupportTxtFld,
.sapUiSupportToolbar > .sapUiSupportTxtFld {
	margin-top: 2px;
	vertical-align: top;
}

.sapUiSupportToolbar > .sapUiSupportLink {
	margin-top: 6px;
	vertical-align: top;
}

/** Plugins **/

#sapUiSupportTechInfo, #sapUiSupportTrace {
	height: 350px;
}

#sapUiSupportTechInfo > table {
	width: 100%;
}

#sapUiSupportTechInfo-tggleDbgSrc,
#sapUiSupportTechInfo-tggleStatistics {
	margin-left: 15px;
}

#sapUiSupportTechInfo-Refresh {
	position: absolute;
	right: 15px;
}

#sapUiSupportTrace {
	overflow: hidden;
}

.infoTable {
	border-collapse: collapse;
	margin: 5px;
}

.infoTable td {
	padding: 5px;
}

#sapUiSupportPerf .sapUiSupportPerfCntnt,
#sapUiSupportTechInfo .sapUiSupportTechInfoCntnt,
#sapUiSupportTrace .sapUiSupportTraceCntnt {
	overflow: auto;
	position: absolute;
	top: 33px;
	left: 5px;
	right: 5px;
	bottom: 0;
}

#sapUiSupportTrace .sapUiSupportTraceEntryTime,
#sapUiSupportTrace .sapUiSupportTraceEntryLevel {
	font-weight: bold;
	display: inline-block;
	vertical-align: top;
}

#sapUiSupportTrace .sapUiSupportTraceEntryMessage {
	display: inline-block;
	vertical-align: top;
}

#sapUiSupportTrace .sapUiSupportTraceEntryLevel {
	width: 70px;
}

.sapUiSupportTraceEntryLevel_unknown,
.sapUiSupportTraceEntryLevel_unknown .sapUiSupportTraceEntryTime,
.sapUiSupportTraceEntryLevel_TRACE,
.sapUiSupportTraceEntryLevel_TRACE .sapUiSupportTraceEntryTime,
.sapUiSupportTraceEntryLevel_DEBUG,
.sapUiSupportTraceEntryLevel_DEBUG .sapUiSupportTraceEntryTime,
.sapUiSupportTraceEntryLevel_INFO,
.sapUiSupportTraceEntryLevel_INFO .sapUiSupportTraceEntryTime {
	color: #000000
}

.sapUiSupportTraceEntryLevel_FATAL,
.sapUiSupportTraceEntryLevel_FATAL .sapUiSupportTraceEntryTime,
.sapUiSupportTraceEntryLevel_ERROR,
.sapUiSupportTraceEntryLevel_ERROR .sapUiSupportTraceEntryTime {
	color: #E60000;
}

.sapUiSupportTraceEntryLevel_WARNING,
.sapUiSupportTraceEntryLevel_WARNING .sapUiSupportTraceEntryTime {
	color: #FFAA00
}

#sapUiSupportTrace .sapUiSupportTraceEntry {
	border-bottom: 1px solid #BFBFBF;
	margin-top: 10px;
}

#sapUiSupportTrace .sapUiSupportTraceEntryTime {
	width: 100px;
}

#sapUiSupportTrace > .sapUiSupportToolbar > select,
#sapUiSupportTrace > .sapUiSupportToolbar > input {
	margin-left: 5px;
	height: 26px;
}

#sapUiSupportControlTree {
	height: 480px;
	overflow: hidden;
}

.sapUiSupportControlTreeTitle {
	padding: 0.5rem;
}

.sapUISupportLabel {
	margin: 0.25rem auto;
}

.sapUiSupportContainer,
#sapUiSupportControlTreeArea,
#sapUiSupportControlPropertiesArea {
	height: 454px;
	width: 48%;
	border: 1px dotted black;
	background-color: white;
	padding: 3px;
	overflow: auto;
	float: left;
	position: relative;
}

#sapUiSupportControlPropertiesArea h2 {
	padding-left: 5px;
}

.sapUiSupportContainer {
	border: 0;
	height: auto;
}

#sapUiSupportControlPropertiesArea {
	float: right;
	height: 423px;
}

ul.sapUiSupportControlTreeList, ul.sapUiSupportControlTreeList ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.sapUiSupportControlTreeList li {
	margin: 2px 0 2px 11px;
	padding: 0;
}

ul.sapUiSupportControlTreeList .sapUiSupportLabel {
	vertical-align: middle;
}

#sapUiSupportControlTreeArea li {
	overflow: hidden;
	cursor: pointer;
}

#sapUiSupportControlTreeArea li img.sapUiControlTreeIcon {
	float: left;
	margin-top: 5px;
	margin-right: 3px;
	width: 12px;
	height: 12px;
}

#sapUiSupportControlTreeArea li div {
	overflow: hidden;
	padding: 2px 5px;
}

#sapUiSupportControlTreeArea li.sapUiControlTreeLink span {
	color: gray;
	text-decoration: underline;
}

#sapUiSupportControlTreeArea .sapUiSupportControlTreeSelected {
	background-color: #427CAC;
	color: white;
}

#sapUiSupportControlTreeArea .sapUiSupportControlTreeBreakpointCount {
	float: right;
}

#sapUiSupportControlTreeArea .sapUiSupportControlTreeBreakpointCount {
	color: black;
}

#sapUiSupportControlTreeArea .sapUiSupportControlTreeSelected .sapUiSupportControlTreeBreakpointCount {
	color: white;
}

#sapUiSupportControlTabs {
	width: 48%;
	padding-right: 8px;
	overflow: auto;
	float: right;
}

.sapUiSupportControlTabsHidden {
	visibility: hidden;
}

.sapUiSupportItemHidden {
	display: none;
}

#sapUiSupportControlPropertiesArea ul.sapUiSupportControlTreeList li span {
	display: inline-block;
	padding: 5px 0;
	vertical-align: top;
}

#sapUiSupportControlPropertiesArea ul.sapUiSupportControlTreeList li {
	position: relative;
}

.sapUiSupportControlProperties {
	padding: 5px;
}

.sapUiSupportControlProperties table {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

.sapUiSupportControlProperties tr {
	height: 30px;
}

.sapUiSupportControlProperties tr:nth-child(even) {
	background-color: #F9F9F9;
}

.sapUiSupportControlProperties td {
	border: 1px solid #BFBFBF;
	padding: 0 6px;
}

.sapUiSupportControlProperties input[type="text"],
.sapUiSupportControlProperties select {
	width: 100%;
	box-sizing: border-box;
}

.sapUiSupportControlProperties .sapUiSupportModelPathInvalid {
	color: red;
}

.sapUiSupportControlProperties .sapUiSupportModelPathUnverified {
	color: orange;
}

#sapUiSupportPerf > .sapUiSupportToolbar > button {
	margin-right: 5px;
}

.sapUiSupportToolbar > input[type="checkbox"] {
	margin-top: 7px;
}

.sapUiSupportControlProperties td.methodLabel {
	vertical-align: middle;
	padding-left: 7px;
}

.sapUiSupportControlProperties td.methodLabel label {
	padding: 6px 0 6px 0;
	width: 100%;
	display: inline-block;
}

#sapUiSupportControlPropertiesArea ul li .get,
#sapUiSupportControlPropertiesArea ul li .set {
	position: absolute;
	top: 12px;
	font-weight: bold;
}

#sapUiSupportControlPropertiesArea ul li .get {
	right: 50px;
}

html[data-sap-ui-browser^="sf"] #sapUiSupportControlPropertiesArea ul li .get {
	right: 45px;
}

#sapUiSupportControlPropertiesArea ul li .set {
	right: 18px;
}

html[data-sap-ui-browser^="sf"] #sapUiSupportControlPropertiesArea ul li .set {
	right: 16px;
}

.sapUiSupportControlMethods {
	padding: 5px 2px 0 2px;
}

select.sapUiSupportAutocomplete {
	width: 198px;
	box-sizing: border-box;
}

input.sapUiSupportAutocomplete[type="text"] {
	margin-left: -195px;
	width: 174px;
	height: 20px;
	border: none;
}

html[data-sap-ui-browser^="sf"] input[type="text"].sapUiSupportAutocomplete {
	height: 14px;
}

.sapUiSupportControlMethods button {
	margin-left: 28px;
}

html[data-sap-ui-browser^="ff"] .sapUiSupportControlMethods button {
	margin-left: 26px;
}

html[data-sap-ui-browser^="sf"] .sapUiSupportControlMethods select.sapUiSupportAutocomplete {
	width: 189px;
}

html[data-sap-ui-browser^="sf"] .sapUiSupportControlMethods input[type="text"].sapUiSupportAutocomplete {
	width: 159px;
	margin-left: -188px;
}

hr.no-border {
	border-style: solid;
	border-color: #BFBFBF;
	border-bottom: none;
	margin: 10px 0 0 0;
}

ul.sapUiSupportList {
	list-style-type: none;
	padding: 0;
	margin: 0;
}

ul.sapUiSupportList li {
	position: relative;
}

ul.sapUiSupportBreakpointList li {
	border-bottom: 1px solid #BFBFBF;
}

ul.sapUiSupportBreakpointList li:last-child {
	border-bottom: none;
}

ul.sapUiSupportBreakpointList li:hover {
	background-color: #F9F9F9;
}

ul.sapUiSupportBreakpointList li span {
	font-weight: bold;
	padding: 7px 0 7px 10px;
	display: inline-block;
}

ul.sapUiSupportBreakpointList li img {
	position: absolute;
	display: none;
	right: 10px;
	top: 7px;
}

ul.sapUiSupportBreakpointList li:hover img {
	display: inline;
}


/* DEBUGGING */

#sapUiSupportDebugging > #sapUiSupportDebugging-RebootContainer {
	box-sizing: border-box;
	width: 100%;
}

#sapUiSupportDebugging-RebootSelect {
	width: 100%;
	margin: 6px 0;
}

#sapUiSupportDebugging-RebootInput {
	font-size: 14px;
	padding: 4px;
	box-sizing: border-box;
	width: calc(100% - 161px);
	margin-right: 5px;
	border-width: 1px;
}

#sapUiSupportDebugging-MethodContainer {
	float: right;
}

#sapUiSupportDebugging-ClassSelect {
	width: 228px;
}

#sapUiSupportDebugging-ClassInput {
	margin-left: -225px;
	width: 204px;
}

#sapUiSupportDebugging-MethodSelect {
	width: 150px;
}

html[data-sap-ui-browser^="sf"] #sapUiSupportDebugging-MethodSelect {
	width: 140px;
}

#sapUiSupportDebugging-MethodInput {
	margin-left: -148px;
	width: 119px;
}

html[data-sap-ui-browser^="sf"] #sapUiSupportDebugging-MethodInput {
	margin-left: -139px;
	width: 110px;
}

#sapUiSupportDebugging-AddBreakpoint {
	margin-left: 32px;
}

#sapUiSupportDebugging-AddClass {
	margin-left: 25px;
}

html[data-sap-ui-browser^="ff"] #sapUiSupportDebugging-AddClass,
html[data-sap-ui-browser^="ff"] #sapUiSupportDebugging-AddBreakpoint {
	margin-left: 28px;
}

#sapUiSupportDebugging-ClassList li div {
	padding: 7px 0 7px 10px;
	margin-right: 35px;
	font-weight: bold;
}

#sapUiSupportDebugging-ClassList li img.remove-class {
	top: 7px;
	right: 10px;
	position: absolute;
	display: none;
}

#sapUiSupportDebugging-ClassList li.selected div,
#sapUiSupportDebugging-ClassList li div:hover {
	color: #fff;
	background-color: #427CAC;
	cursor: pointer;
}

#sapUiSupportDebugging-ClassList li:hover img.remove-class {
	display: inline;
}

#sapUiSupportDebugging-ClassList li span.breakpoints {
	float: right;
	margin-right: 10px;
}

/* ==========================================================================
   Performance
   ========================================================================== */
.sapUiSupportBody,
.sapUiSupportCntnt,
.sapUiSupportPerf-PanelContent,
#sapUiSupportPerf-Panel,
#sapUiSupportPerf-PanelContent:not(.sapUiSupportHidden) {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

#sapUiSupportPerf-PanelContent {
	visibility: visible;
	min-height: 400px;
	position: relative;
}

#sapUiSupportPerf-PanelContent.sapUiSupportHidden {
	visibility: hidden;
}

/* ================================================================================================================== */
#sapUiSupportPerf {
	bottom: 0;
	left: 0;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
}

#sapUiSupportPerf ol,
#sapUiSupportPerf li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.flex-spacer {
	flex-grow: 1;
}

/* ==========================================================================
   Performance Header
   ========================================================================== */
#sapUiSupportPerfHeader {
	display: flex;
	flex-direction: column;

	height: 80px;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.sapUiSupportPerfHeaderFilters {
	background: #eee;
	border-bottom: solid 1px #ddd;
	display: flex;
	height: 30px;
	line-height: 30px;
	padding: 0 5px;
}

.sapUiSupportPerfHeaderFilters > div {
	padding-left: 5px;
}

#sapUiSupportPerfHeaderTimelineOverview {
	border-bottom: solid 1px #ddd;
	border-bottom: solid 1px #ddd;
	padding-left: 250px;
	position: relative;
	flex-grow: 1;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline {
	background: #fafafa;
	bottom: 0;
	display: flex;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline ol {
	bottom: 0;
	display: flex;
	left: 250px;
	position: absolute;
	right: 0;
	top: 2px;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline li {
	display: flex;
	position: relative;
	flex: 1;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline li .duration,
#sapUiSupportPerfHeaderTimelineOverview .timeline li .time {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline li .duration {
	margin-right: 1px;
	width: 4px;
}

#sapUiSupportPerfHeaderTimelineOverview .timeline li .time {
	opacity: 0.5;
	width: 2px;
}

#sapUiSupportPerfHeaderTimelineOverview .bars-wrapper {
	bottom: 0;
	display: flex;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	align-items: flex-end;
	justify-content: center;
}

/* ================================================================================================================== */

#sapUiSupportNoDataOverlay {
	position: absolute;
	top: 90px;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 100;
	display: none;
}

/* ================================================================================================================== */

.line {
	font-size: 11px;
	height: 20px;
	line-height: 20px;
	white-space: nowrap;
}

.nodata {
	border-bottom: solid 1px #eee;
	overflow: hidden;
	box-sizing: border-box;
}

/* Filters
   ========================================================================== */

.filters > div {
	padding-right: 20px;
	white-space: nowrap;
}

#categories {
	display: flex;
	max-width: 440px;
	padding-right: 0;
}

#categories > label {
	cursor: pointer;
	margin-right: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: capitalize;
	white-space: nowrap;
}

#categories input {
	bottom: 1px;
	margin: 0 3px 0;
	position: relative;
	vertical-align: middle;
}

#categories input::after {
	background: #fff;
	border: solid 1px #666;
	border-radius: 3px;
	box-sizing: border-box;
	color: #fff;
	content: '✓';
	cursor: pointer;
	display: inline-block;
	font-size: 10px;
	font-weight: bolder;
	height: 13px;
	line-height: 10px;
	padding-left: 1px;
	padding-top: 1px;
	position: absolute;
	width: 13px;
}

#categories input:checked::after {
	background: #666;
}

.timeline .requireModuleType,
#categories input.requireModuleType:checked::after {
	background: hotpink;
}

.timeline .requestType,
#categories input.requestType:checked::after {
	background: blue;
}

.timeline .afterRenderingType,
#categories input.afterRenderingType:checked::after {
	background: orange;
}

.timeline .renderingType,
#categories input.renderingType:checked::after {
	background: green;
}

.timeline .unknownType,
#categories input.unknownType:checked::after {
	background: #666;
}

#sapUiSupportPerfHeaderFilterMinDuration {
	box-sizing: border-box;
	width: 50px;
	height: 26px;
	line-height: 2;
	margin-top: 2px;
}

#sapUiSupportPerfHeaderFilterSort {
	margin-right: 8px;
}

/* ==========================================================================
   Timeline
   ========================================================================== */

#sapUiSupportPerfHeaderTimeline {
	display: flex;
	bottom: 0;
	left: 0;
	overflow: auto;
	position: absolute;
	right: 0;
	top: 100px;
	z-index: 1;
}

#sapUiSupportPerfHeaderTimelineBarWrapper {
	flex-grow: 1;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#sapUiSupportPerfHeaderTimelineBarWrapper ol {
	background-image: linear-gradient(90deg, #ddd 1px, transparent 1px),
	linear-gradient(90deg, #efefef 1px, transparent 1px),
	linear-gradient(90deg, #fafafa 1px, transparent 1px);
	z-index: 0;
}

#sapUiSupportPerfHeaderTimelineBarWrapper li {
	box-sizing: border-box;
	padding-top: 6px;
}

/* ================================================================================================================== */
#sapUiSupportPerfHeaderTimelineBarInfoWrapper {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 250px;
}

#sapUiSupportPerfHeaderTimelineBarInfoWrapper li {
	overflow-x: hidden;
}

#sapUiSupportPerfHeaderTimelineBarInfoWrapper .info:before {
	background: #eee;
	content: '';
	display: inline-block;
	height: 9px;
	margin-left: 4px;
	margin-right: 4px;
	width: 8px;
}

#sapUiSupportPerfHeaderTimeline li.hover {
	background: rgba(0, 0, 0, 0.025);
}

/* ================================================================================================================== */

#sapUiSupportPerfHeaderTimeline .requireModuleType .info:before {
	background: hotpink;
}

#sapUiSupportPerfHeaderTimeline .requestType .info:before {
	background: blue;
}

#sapUiSupportPerfHeaderTimeline .afterRenderingType .info:before {
	background: orange;
}

#sapUiSupportPerfHeaderTimeline .renderingType .info:before {
	background: green;
}

#sapUiSupportPerfHeaderTimeline .unknownType .info:before {
	background: #eee;
}

.timeline {
	display: flex;
	overflow: hidden;
}

.flattenBarOffset .bar {
	margin-left: 0 !important;
}

.bar {
	background-color: #88BF49;
	height: 6px;
	position: relative;
}

.sub-bar {
	background-color: #88BF49;
	bottom: -3px;
	height: 2px;
	left: 0;
	opacity: 0.5;
	position: absolute;
}

/* ================================================================================================================== */

.defaultTimeStyle {
	background-color: #aebf4d;
}

.oneTimeStyle {
	background-color: #aebf4d;
}

.twoTimeStyle {
	background-color: #bfac4f;
}

.threeTimeStyle {
	background-color: #bf8c4c;
}

.fourTimeStyle {
	background-color: #bf784b;
}

.fiveTimeStyle {
	background-color: #bf5e3f;
}

.sixTimeStyle {
	background-color: #bf3020;
}

/* ================================================================================================================== */

#slider {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 250px;
	cursor: pointer;
	overflow: hidden;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

#slideHandle,
#leftHandle,
#rightHandle {
	display: inline-block;
}

#slideHandle {
	position: relative;
	height: 50px;
	box-sizing: border-box;
	border: 1px solid #aaa;
	top: -1px;
}

#slideHandle::before,
#slideHandle::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.25);
	width: 10000px;
	pointer-events: none;
}

#slideHandle::before {
	margin-right: 100%;
	right: 1px;
}

#slideHandle::after {
	margin-left: 100%;
	left: 1px;
}

#leftHandle,
#rightHandle {
	position: absolute;
	height: 100%;
	width: 5px;
	cursor: ew-resize;
	overflow: hidden;
	background: #aaa;
}

#leftHandle {
	left: 0;
}

#rightHandle {
	right: 0;
}

#leftHandle::after,
#rightHandle::after {
	content: '...';
	position: absolute;
	top: 0;
	left: 0;
	font-weight: bold;
	color: #fff;
}

#leftHandle::after {
	transform: rotate(90deg) translate(15px, 0);
}

#rightHandle::after {
	transform: rotate(90deg) translate(15px, -1px);
}

/* ================================================================================================================== */
/* Timeline grid */
/* ================================================================================================================== */

#grid {
	position: absolute;
	top: 90px;
	right: 0;
	bottom: 0;
	left: 250px;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	border-left: 1px solid #eee;
}

#grid .header {
	width: 100%;
	display: flex;
	box-sizing: border-box;
}

#grid .body {
	display: flex;
	flex-grow: 1;
}

#grid .header > div,
#grid .body > div {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 0;
	box-sizing: border-box;
	position: relative;
	white-space: nowrap;
	font-size: 80%;
}

#grid .body > div:nth-child(5n) {
	border-right: 1px solid #fafafa;
}

#grid .body > div:nth-child(10n) {
	border-right: 1px solid #eee;
}

#grid .header > div:first-child::after,
#grid .header > div:nth-child(5n)::after,
#grid .header > div:nth-child(10n)::after {
	display: block;
	content: attr(data-time);
	position: absolute;
	top: 0;
	right: 0;
	padding-right: 5px;
}

#grid .header > div:nth-child(5n) {
	color: #aaa;
}

#grid .header > div:first-child,
#grid .header > div:nth-child(10n) {
	color: #666;
}

#grid .header > div:first-child::after {
	right: 100%;
}

#sapUiSupportPerfToggleRecordingBtn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 100%;
	font-weight: bold;
	left: 12px;
	outline: none;
	padding: 0;
	position: absolute;
	top: 18px;
}

.sapUiSupportIntToggleRecordingBtn {
	line-height: 30px;
	margin-right: 5px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 100%;
	font-weight: bold;
	outline: none;
	padding: 0;
}

.sapUiSupportIntToggleRecordingBtn::before,
#sapUiSupportPerfToggleRecordingBtn::before {
	border: solid 5px #bf3020;
	border-radius: 3px;
	content: '';
	display: inline-block;
	height: 0;
	margin-right: 4px;
	width: 0;
}

.sapUiSupportIntToggleRecordingBtn::after,
#sapUiSupportPerfToggleRecordingBtn::after {
	color: #bf3020;
	content: attr(data-state);
}

.sapUiSupportIntToggleRecordingBtn[data-state^="Start recording"]::before,
#sapUiSupportPerfToggleRecordingBtn[data-state^="Start recording"]::before {
	border-color: transparent transparent transparent #333;
	border-radius: 0;
	border-style: solid;
	border-width: 5px 0 5px 10px;
	height: 0;
	width: 0;
}

.sapUiSupportIntToggleRecordingBtn[data-state^="Start recording"]::after,
#sapUiSupportPerfToggleRecordingBtn[data-state^="Start recording"]::after {
	color: #333;
}

.sapUiSupportIntRecordingInfo {
	margin-right: 5px;
	margin-top: 8px;
	float: right;
}

.sapUiSupportIntClearBtn{
	background-color: #F2F2F2;
	border-radius: 3px;
}

.sapUiSupportIntExportBtn {
	margin-left: 5px;
}

.sapUiSupportIntImportBtn {
	margin-left: 5px;
}

.sapUiSupportIntImportExportBtn {
	background-color: #417BAB;
	color: white;
	border-radius: 3px;
	border-color: #417BAB;
	float: right;
}

.sapUiSupportSelect {
	height: 26px;
	border-radius: 3px;
}

.sapUiFormResGridCont > .sapUiFormElementLbl.sapUiRespGridBreak {
	min-height: 15px;
}

/* ================================================================================================================== */
/* FileUpload control used in Interaction tab */
/* ================================================================================================================== */

.sapUiSupportIntFupInputMask {  /* the element masking the real (but hidden) file input, so the clickable area has exactly the same size as the visible control */
	display: inline-block;
	position: absolute;
	right: 0;
	overflow: hidden;
	width: 60px;
	float: right;
	height: 26px;
}

.sapUiSupportIntFupInputMask > input { /* the real, but hidden file input */
	position: absolute;
	opacity: 0;
	top: 0;
	bottom: 0;
	cursor: hand;
	left: -4em;       /* avoid the input field behind the file chooser */
	font-size: 500px; /* to make the field high enough for most themes; for themes with very large fonts this needs to be increased further */
}

html[data-sap-ui-browser^="sf"] .sapUiSupportIntFupInputMask > input, /* for Safari and Chrome the file input is not clickable with opacity "0" */
html[data-sap-ui-browser^="cr"] .sapUiSupportIntFupInputMask > input {
	position: relative;
	left: auto;
	opacity: 0.01;
}

html[data-sap-ui-browser^="cr"] .sapUiSupportIntFupInputMask > input {
	float: right;
}

.sapUiSupportIntODataLbl input[type=checkbox] {
	position: relative;
	vertical-align: middle;
	bottom: 1px;
}

.remove-breakpoint,
.remove-class {
	cursor:pointer;
	margin-left:5px;
}

.sapUiSupportRefreshBinding {
	cursor: pointer;
	margin-left: 5px;
	vertical-align: middle;
}

#sapUiSupportDebugging-ClassContainer .sapUISupportLabel,
#sapUiSupportDebugging-MethodContainer .sapUISupportLabel {
	margin-right: 5px;
}

#sapUiSupportDebugging-MethodContainer p {
	text-align: center;
	font-weight: bold;
}