@charset "UTF-8";

.report-view-container {
	background: white;
	box-sizing: border-box;
	border-radius: 4px;
	display: grid;
	grid-template-columns: 30px auto 30px;
	grid-template-rows: 30px 600px 30px;
	gap: 0px 0px;
	grid-template-areas:
		"report-view-panel-left report-view-panel-top report-view-panel-right"
		"report-view-panel-left report-view-panel-body report-view-panel-right"
		"report-view-panel-left report-view-panel-bottom report-view-panel-right";
}

.report-view-panel-left {
	grid-area: report-view-panel-left;
}

.report-view-panel-right {
	grid-area: report-view-panel-right;
}

.report-view-panel-top {
	grid-area: report-view-panel-top;
}

.report-view-panel-bottom {
	grid-area: report-view-panel-bottom;
}

.report-view-panel-body {
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: 50px 92%;
	gap: 0px 0px;
	grid-template-areas: "report-view-body-title" "report-view-body-content";
	grid-area: report-view-panel-body;
}

.report-view-body-title {
	grid-area: report-view-body-title;
  display: grid;
  grid-template-columns: 80% 20%;
  grid-template-rows: 50px;
  gap: 0px 0px;
  grid-template-areas:
    "report-view-title report-view-copy";
  font-size: 24px;
}
.report-view-title {
  grid-area: report-view-title;

}

.report-view-copy {
  grid-area: report-view-copy;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  line-height: 50px;
  text-align: center;
  font-size: 14px;
  background: #f0f0f0;
}

.report-view-copy:hover {
  background: #fafafa;
}
.report-view-copy:active {
  background: #f6f6f6;
}
.report-view-body-content {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 38px auto;
	gap: 0px 0px;
	grid-template-areas: "report-view-content-tabs"
		"report-view-content-list";
	grid-area: report-view-body-content;
}

.report-view-content-tabs {
	grid-area: report-view-content-tabs;
	line-height: 30px;
	display: flex;
}

.report-view-content-list {
	grid-area: report-view-content-list;
	overflow-y: scroll;
	border: 1px solid #f0f0f0;
}

.report-view-tab {
	width: auto;
	height: 30px;
	margin: 0px;
	padding: 4px 8px;
	border-radius: 4px 4px 0px 0px;
	background: #f0f0f0;
}

.tab-selected {
	background: var(--col-selected);
}

.report-view-tab:hover {
	background: var(--col-hover);
}

.report-element-sub {
	padding: 0px 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.report-element {
	height: 40px;
	line-height: 40px;
	display: grid;
	grid-template-columns: 50px 50px 240px 200px 230px 1fr;
	grid-template-rows: 40px;
	gap: 0px 0px;
	grid-template-areas:
		"report-element-type report-processed report-element-data report-element-name report-element-email report-element-description";
}

.report-element:hover {
	background: #f0f0f0;
}

.report-processed{
	grid-area: report-processed;
}

.report-element-type {
	grid-area: report-element-type;
    display: flex;
    justify-self: center;
    align-self: center;
}

.report-element-data {
	grid-area: report-element-data;
}

.report-element-name {
	grid-area: report-element-name;
}

.report-element-email {
	grid-area: report-element-email;
}

.report-element-description {
	grid-area: report-element-description;
}