io.gatling.charts.assets.style.style.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of gatling-charts Show documentation
gatling-charts
The newest version!
/*
 * Copyright 2011-2024 GatlingCorp (https://gatling.io)
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *  http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
	--gatling-background-color: #f2f2f2;
	--gatling-background-light-color: #f7f7f7;
	--gatling-border-color: #dddddd;
	--gatling-blue-color: #4a9fe5;
	--gatling-dark-blue-color: #24275e;
	--gatling-danger-color: #f15b4f;
	--gatling-danger-light-color: #f5d1ce;
	--gatling-enterprise-color: #6161d6;
	--gatling-enterprise-light-color: #c4c4ed;
	--gatling-gray-medium-color: #bbb;
	--gatling-hover-color: #e6e6e6;
	--gatling-hover-background-color: #e6e6e6;
	--gatling-light-color: #ffffff;
	--gatling-orange-color: #f78557;
	--gatling-success-color: #68b65c;
	--gatling-text-color: #1f2024;
	--gatling-total-color: #ffa900;

	--gatling-border-radius: 2px;
	--gatling-spacing-small: 5px;
	--gatling-spacing: 10px;
	--gatling-spacing-layout: 20px;

	--gatling-font-weight-normal: 400;
	--gatling-font-weight-medium: 500;
	--gatling-font-weight-bold: 700;
	--gatling-font-size-secondary: 12px;
	--gatling-font-size-default: 14px;
	--gatling-font-size-heading: 16px;
	--gatling-font-size-section: 22px;
	--gatling-font-size-header: 34px;

	--gatling-media-desktop-large: 1920px;
}

html[data-theme="dark"] {
	--gatling-background-color: #1e2225;
	--gatling-background-light-color: #272c30;
	--gatling-border-color: #555555;
	--gatling-blue-color: #1188ff;
	--gatling-dark-blue-color: #17223B;
	--gatling-danger-color: #d9534f;
	--gatling-danger-light-color: #c9302c;
	--gatling-enterprise-color: #b2a2ea;
	--gatling-enterprise-light-color: #343479;
	--gatling-gray-medium-color: #999;
	--gatling-hover-color: #30363b;
	--gatling-hover-background-color: #2c2c2c;
	--gatling-light-color: #394046;
	--gatling-orange-color: #fe8e5f;
	--gatling-success-color: #5cb85c;
	--gatling-text-color: #dee2e6;
	--gatling-total-color: #ffa900;
}

* {
	min-height: 0;
	min-width: 0;
}

html,
body {
	height: 100%;
	width: 100%;
}

body {
	color: var(--gatling-text-color);
	font-family: arial;
	font-size: var(--gatling-font-size-secondary);
	margin: 0;
}

.app-container {
	display: flex;
	flex-direction: column;

	height: 100%;
	width: 100%;
}

.head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;

	flex: 1;

	background-color: var(--gatling-light-color);
	border-bottom: 1px solid var(--gatling-border-color);
	min-height: 69px;
	padding: 0 var(--gatling-spacing-layout);
}

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

.head .theme-toggle {
	margin-left: 20px;
	background: none;
	color: var(--gatling-text-color);
	border: none;
}

.head .theme-toggle:hover {
	color: var(--gatling-gray-medium-color);
	cursor: pointer;
}

body .toggle-dark, body .toggle-light {
	display: block;
}

[data-theme="dark"] body .toggle-dark {
	display: none;
}

[data-theme="light"] body .toggle-light {
	display: none;
}

[data-theme="dark"] body .logo-enterprise-light {
	display: none;
}

[data-theme="light"] body .logo-enterprise-dark {
	display: none;
}

.gatling-open-source {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	gap: var(--gatling-spacing-layout);
}

.gatling-documentation {
	display: flex;
	align-items: center;

	background-color: var(--gatling-light-color);
	border-radius: var(--gatling-border-radius);
	color: var(--gatling-orange-color);
	border: 1px solid var(--gatling-orange-color);
	text-align: center;
	padding: var(--gatling-spacing-small) var(--gatling-spacing);
	height: 23px;

	font-size: var(--gatling-font-size-default);
}

.gatling-documentation:hover {
	background-color: var(--gatling-orange-color);
	color: var(--gatling-light-color);
}

.gatling-logo {
	height: 35px;
}

.gatling-logo img {
	height: 100%;
}

[data-theme="dark"] .gatling-logo-light {
	display: none;
}

[data-theme="light"] .gatling-logo-dark {
	display: none;
}

.container {
	display: flex;
	align-items: stretch;
	height: 100%;
}

.nav {
	min-width: 210px;
	width: 210px;
	max-height: calc(100vh - var(--gatling-spacing-layout) - var(--gatling-spacing-layout));
	background: var(--gatling-light-color);
	border-right: 1px solid var(--gatling-border-color);
	overflow-y: auto;
}

@media print {
	.nav {
		display: none;
	}
}

@media screen and (min-width: 1920px) {
	.nav {
		min-width: 310px;
		width: 310px;
	}
}

.nav ul {
	display: flex;
	flex-direction: column;

	padding: 0;
	margin: 0;
}

.nav li {
	display: flex;
	list-style: none;
	width: 100%;
	padding: 0;
}

.nav .item {
	display: inline-flex;
	align-items: center;
	margin: 0 auto;
	white-space: nowrap;
	color: var(--gatling-text-color);
	font-size: var(--gatling-font-size-default);
	font-weight: var(--gatling-font-weight-bold);
	margin: 0;
	width: 100%;
}

.nav .item .nav-label {
	padding: var(--gatling-spacing) var(--gatling-spacing-layout);
}

.nav .item:hover {
	background-color: var(--gatling-hover-color);
}

.nav .on .item {
	background-color: var(--gatling-orange-color);
}

.nav .on .item span {
	color: var(--gatling-light-color);
}

.cadre {
	width: 100%;
	height: 100%;
	overflow-y: scroll;
	scroll-behavior: smooth;
}

@media print {
	.cadre {
		overflow-y: unset;
	}
}

.frise {
	position: absolute;
	top: 60px;
	z-index: -1;

	background-color: var(--gatling-background-color);
	height: 530px;
}

.global {
	height: 650px
}

a {
	text-decoration: none;
}

a:hover {
	color: var(--gatling-hover-color);
}

img {
	border: 0;
}

h1 {
	color: var(--gatling-dark-blue-color);
	font-size: var(--gatling-font-size-section);
	font-weight: var(--gatling-font-weight-medium);
	text-align: center;
	margin: 0;
}

h1 span {
	color: var(--gatling-hover-color);
}

.enterprise {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--gatling-spacing-small);

	background-color: var(--gatling-light-color);
	border-radius: var(--gatling-border-radius);
	border: 1px solid var(--gatling-enterprise-color);
	color: var(--gatling-enterprise-color);
	text-align: center;
	padding: var(--gatling-spacing-small) var(--gatling-spacing);
	height: 25px;
}

.enterprise:hover {
	background-color: var(--gatling-hover-color);
	color: var(--gatling-enterprise-color);
}

.enterprise img {
	display: block;
	width: 160px;
}

.simulation-card {
	display: flex;
	flex-direction: column;
	align-self: stretch;
	flex: 1;
	gap: var(--gatling-spacing-layout);
	max-height: 375px;
}

#simulation-information {
	flex: 1;
}

.simulation-version-information {
	display: flex;
	flex-direction: column;

	gap: var(--gatling-spacing);
	font-size: var(--gatling-font-size-default);

	background-color: var(--gatling-background-light-color);
	border: 1px solid var(--gatling-border-color);
	border-radius: var(--gatling-border-radius);
	padding: var(--gatling-spacing);
}

.simulation-information-container {
	display: flex;
	flex-direction: column;
	gap: var(--gatling-spacing);
}

.withTooltip .popover-title {
	display: none;
}

.popover-content p {
	margin: 0;
}

html[data-theme="dark"] div.popover {
	background-color: var(--gatling-light-color);
	border-bottom: none;
}

html[data-theme="dark"] div.popover.right .arrow {
	border-right-color: var(--gatling-light-color);
}

.ellipsed-name {
	display: block;

	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.simulation-information-item {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: var(--gatling-spacing-small);
}

.simulation-information-item.description {
	flex-direction: column;
}

.simulation-information-label {
	display: inline-block;
	font-weight: var(--gatling-font-weight-bold);
	min-width: fit-content;
}

.simulation-information-title {
	display: block;
	text-align: center;
	color: var(--gatling-text-color);
	font-weight: var(--gatling-font-weight-bold);
	font-size: var(--gatling-font-size-heading);
	width: 100%;
}

.simulation-tooltip span {
	display: inline-block;
	word-wrap: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
}

.content {
	display: flex;
	flex-direction: column;
}

.content-in {
	width: 100%;
	height: 100%;

	overflow-x: scroll;
}

html[data-theme="dark"] .content-in {
	background-color: var(--gatling-background-color);
}

@media print {
	.content-in {
		overflow-x: unset;
	}
}

.container-article {
	display: flex;
	flex-direction: column;
	gap: var(--gatling-spacing-layout);

	min-width: 1050px;
	width: 1050px;
	margin: 0 auto;
	padding: var(--gatling-spacing-layout);
	box-sizing: border-box;
}

@media screen and (min-width: 1920px) {
	.container-article {
		min-width: 1350px;
		width: 1350px;
	}

	#responses * .highcharts-tracker {
		transform: translate(400px, 70px);
	}
}

.content-header {
	display: flex;
	flex-direction: column;
	gap: var(--gatling-spacing-layout);

	background-color: var(--gatling-background-light-color);
	border-bottom: 1px solid var(--gatling-border-color);
	padding: var(--gatling-spacing-layout) var(--gatling-spacing-layout) 0;
}

.onglet {
	font-size: var(--gatling-font-size-header);
	font-weight: var(--gatling-font-weight-medium);
	text-align: center;
}

.sous-menu {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.sous-menu-spacer {
	display: flex;
	align-items: center;
	flex-direction: row;
}

.sous-menu .item {
	margin-bottom: -1px;
}

.sous-menu a {
	display: block;

	font-size: var(--gatling-font-size-heading);
	font-weight: var(--gatling-font-weight-normal);
	padding: var(--gatling-spacing-small) var(--gatling-spacing) var(--gatling-spacing);
	border-bottom: 2px solid transparent;
	color: var(--gatling-text-color);
	text-align: center;
	width: 100px;
}

.sous-menu a:hover {
	border-bottom-color: var(--gatling-text-color);
}

.sous-menu .ouvert a {
	border-bottom-color: var(--gatling-orange-color);
	font-weight: var(--gatling-font-weight-bold);
}

.article {
	position: relative;

	display: flex;
	flex-direction: column;
	gap: var(--gatling-spacing-layout);
}

.infos {
	width: 340px;
	color: var(--gatling-light-color);
}

.infos-title {
	background-color: var(--gatling-background-light-color);
	border: 1px solid var(--gatling-border-color);
	border-bottom: 0;
	border-top-left-radius: var(--gatling-border-radius);
	border-top-right-radius: var(--gatling-border-radius);
	color: var(--gatling-text-color);
	font-size: var(--gatling-font-size-heading);
	font-weight: var(--gatling-font-weight-bold);
	text-align: center;
	padding: var(--gatling-spacing-small) var(--gatling-spacing);
}

.info {
	background-color: var(--gatling-background-light-color);
	border-bottom-left-radius: var(--gatling-border-radius);
	border-bottom-right-radius: var(--gatling-border-radius);
	border: 1px solid var(--gatling-border-color);
	color: var(--gatling-text-color);
	height: 100%;
	margin: 0;
}

.info table {
	margin: auto;
	padding-right: 15px;
}

.alert-danger {
	background-color: var(--gatling-danger-light-color);
	border: 1px solid var(--gatling-danger-color);
	border-radius: var(--gatling-border-radius);
	color: var(--gatling-text-color);
	padding: var(--gatling-spacing-layout);
	font-weight: var(--gatling-font-weight-bold);
}

.infos h2 {
	color: var(--gatling-text-color);
	font-size: var(--gatling-font-size-default);
	font-weight: var(--gatling-font-weight-bold);
	height: 19px;
	margin: 0;
	padding: 3.5px 0 0 35px;
}

.infos .first::before {
	content: '';
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2px;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	background: url('executions.svg');
	background-size: contain;
}

.infos .second::before {
	content: '';
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2px;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	background: url('time.svg');
	background-size: contain;
}

html[data-theme="dark"] .infos .first::before,
html[data-theme="dark"] .infos .second::before {
	filter: invert(0.9);
}

.infos th {
	text-align: center;
}

.infos td {
	font-weight: var(--gatling-font-weight-bold);
	padding: var(--gatling-spacing-small);
	-webkit-border-radius: var(--gatling-border-radius);
	-moz-border-radius: var(--gatling-border-radius);
	-ms-border-radius: var(--gatling-border-radius);
	-o-border-radius: var(--gatling-border-radius);
	border-radius: var(--gatling-border-radius);
	text-align: right;
	width: 50px;
}

.infos .title {
	width: 120px;
}

.infos .ok {
	background-color: var(--gatling-success-color);
	color: var(--gatling-light-color);
}

.infos .total {
	background-color: var(--gatling-total-color);
	color: var(--gatling-light-color);
}

.infos .ko {
	background-color: var(--gatling-danger-color);
	-webkit-border-radius: var(--gatling-border-radius);
	border-radius: var(--gatling-border-radius);
	color: var(--gatling-light-color);
}

.schema-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gatling-spacing-layout);
}

.schema {
	background: var(--gatling-background-light-color);
	border-radius: var(--gatling-border-radius);
	border: 1px solid var(--gatling-border-color);
}

.ranges {
	height: 375px;
	width: 500px;
}

.ranges-large {
	height: 375px;
	width: 530px;
}

.geant {
	height: 362px;
}

.extensible-geant {
	width: 100%;
}

.polar {
	height: 375px;
	width: 230px;
}

.chart_title {
	color: var(--gatling-text-color);
	font-weight: var(--gatling-font-weight-bold);
	font-size: var(--gatling-font-size-heading);
	padding: 2px var(--gatling-spacing);
}

html[data-theme="dark"] .chart_title {
	color: var(--gatling-text-color);
	font-weight: var(--gatling-font-weight-bold);
	font-size: var(--gatling-font-size-heading);
	padding: 2px var(--gatling-spacing);
}

html[data-theme="dark"] .highcharts-background {
	fill: var(--gatling-background-light-color);
}

html[data-theme="dark"] .highcharts-button-normal rect {
	fill: var(--gatling-background-color) !important;
}

html[data-theme="dark"] .highcharts-button-disabled rect {
	fill: var(--gatling-background-light-color) !important;
}

html[data-theme="dark"] .highcharts-button-pressed rect {
	fill: var(--gatling-orange-color) !important;
}

html[data-theme="dark"] .highcharts-axis text,
html[data-theme="dark"] .highcharts-axis-labels text,
html[data-theme="dark"] .highcharts-button text,
html[data-theme="dark"] .highcharts-legend-item text,
html[data-theme="dark"] .highcharts-range-selector-buttons text {
	fill: var(--gatling-text-color) !important;
}

.statistics {
	display: flex;
	flex-direction: column;

	background-color: var(--gatling-background-light-color);
	border-radius: var(--gatling-border-radius);
	border-collapse: collapse;
	color: var(--gatling-text-color);
	max-height: 100%;
}

.statistics .title {
	display: flex;
	text-align: center;
	justify-content: space-between;

	min-height: 49.5px;
	box-sizing: border-box;

	border: 1px solid var(--gatling-border-color);
	color: var(--gatling-text-color);
	font-size: var(--gatling-font-size-heading);
	font-weight: var(--gatling-font-weight-bold);
	padding: var(--gatling-spacing);
}

.title_base {
	display: flex;
	align-items: center;
	text-align: left;
	user-select: none;
}

.title_base_stats {
	color: var(--gatling-text-color);
	margin-right: 20px;
}

.toggle-table {
	position: relative;
	border: 1px solid var(--gatling-border-color);
	background-color: var(--gatling-light-color);
	border-radius: 25px;
	width: 40px;
	height: 20px;
	margin: 0 var(--gatling-spacing-small);
}

.toggle-table::before {
	position: absolute;
	top: calc(50% - 9px);
	left: 1px;
	content: "";
	width: 50%;
	height: 18px;
	border-radius: 50%;
	background-color: var(--gatling-text-color);
}

.toggle-table.off::before {
	left: unset;
	right: 1px;
}

.title_expanded {
	cursor: pointer;
	color: var(--gatling-text-color);
}

.expand-table,
.collapse-table {
	font-size: var(--gatling-font-size-secondary);
	font-weight: var(--gatling-font-weight-normal);
}

.title_expanded span.expand-table {
	color: var(--gatling-gray-medium-color);
}

.title_collapsed {
	cursor: pointer;
	color: var(--gatling-text-color);
}

.title_collapsed span.collapse-table {
	color: var(--gatling-gray-medium-color);
}

#container_statistics_head {
	position: sticky;
	top: -1px;

	background: var(--gatling-background-light-color);
	margin-top: -1px;
	padding: var(--gatling-spacing-small) var(--gatling-spacing-small) 0px var(--gatling-spacing-small);
}

#container_statistics_body {
	border-bottom-left-radius: var(--gatling-border-radius);
	border-bottom-right-radius: var(--gatling-border-radius);
	margin-top: -1px;
	padding: 0px var(--gatling-spacing-small) var(--gatling-spacing-small) var(--gatling-spacing-small);
}

#container_errors {
	border-bottom-left-radius: var(--gatling-border-radius);
	border-bottom-right-radius: var(--gatling-border-radius);
	padding: var(--gatling-spacing-small) var(--gatling-spacing-small) 0px var(--gatling-spacing-small);
	margin-top: -1px;
}

#container_assertions {
	background-color: var(--gatling-background-light-color);
	border-bottom-left-radius: var(--gatling-border-radius);
	border-bottom-right-radius: var(--gatling-border-radius);
	padding: var(--gatling-spacing-small);
	margin-top: -1px;
}

.statistics-in {
	border-spacing: var(--gatling-spacing-small);
	border-collapse: collapse;
	margin: 0;
}

.statistics .scrollable {
	max-height: 100%;
	overflow-y: auto;
}

#statistics_table_container .statistics .scrollable {
	max-height: 785px;
}

.statistics-in a {
	color: var(--gatling-text-color);
	font-weight: var(--gatling-font-weight-bold);
}

.statistics-in .header {
	border-radius: var(--gatling-border-radius);
	border: 1px solid var(--gatling-border-color);
	font-size: var(--gatling-font-size-default);
	font-weight: var(--gatling-font-weight-bold);
	text-align: center;
	padding: var(--gatling-spacing-small);
}

.sortable {
	cursor: pointer;
}

.sortable span::after {
	content: '';
	display: inline-block;
	margin-left: 5px;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	background: url('sort.svg');
	background-size: contain;
}

.sorted-up span::after {
	background: url('sort-up.svg');
	background-size: contain;
}

.sorted-down span::after {
	background: url('sort-down.svg');
	background-size: contain;
}

html[data-theme="dark"] .sortable span::after {
	filter: invert(0.9);
}

.executions::before {
	content: '';
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2px;
	vertical-align: middle;
	width: 14px;
	height: 14px;
	background: url('executions.svg');
	background-size: contain;
}

.response-time::before {
	content: '';
	display: inline-block;
	margin-right: 5px;
	margin-bottom: 2px;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	background: url('time.svg');
	background-size: contain;
}

html[data-theme="dark"] .executions::before,
html[data-theme="dark"] .response-time::before {
	filter: invert(0.9);
}

.statistics-in td {
	background-color: var(--gatling-light-color);
	border: 1px solid var(--gatling-border-color);
	padding: var(--gatling-spacing-small);
	min-width: 50px;
}

.statistics-in .col-1 {
	width: 175px;
  max-width: 175px;
}
@media screen and (min-width: 1200px) {
	.statistics-in .col-1 {
		width: 50%;
	}
}

.expandable-container {
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	max-width: 100%;
}

.statistics-in .value {
	text-align: right;
	width: 50px;
}

.statistics-in .total {
	color: var(--gatling-text-color);
}

.statistics-in .col-2 {
	background-color: var(--gatling-total-color);
	color: var(--gatling-light-color);
	font-weight: var(--gatling-font-weight-bold);
}

.statistics-in .error-col-1 {
	background-color: var(--gatling-light-color);
	color: var(--gatling-text-color);
}

.statistics-in .error-col-2 {
	text-align: center;
}

.statistics-in .ok {
	background-color: var(--gatling-success-color);
	color: var(--gatling-light-color);
	font-weight: var(--gatling-font-weight-bold);
}

.statistics-in .ko {
	background-color: var(--gatling-danger-color);
	color: var(--gatling-light-color);
	font-weight: var(--gatling-font-weight-bold);
}

.statistics-in .expand-button {
	padding-left: var(--gatling-spacing);
	cursor: pointer;
}

.expand-button.hidden {
	background: none;
	cursor: default;
}

.statistics-button {
	background-color: var(--gatling-light-color);
	color: var(--gatling-text-color);
	padding: var(--gatling-spacing-small) var(--gatling-spacing);
	border: 1px solid var(--gatling-border-color);
	border-radius: var(--gatling-border-radius);
}

#statistics_full_screen{
	padding: var(--gatling-spacing-small);
}

#statistics_full_screen > img {
	width: 14px;
	height: 14px;
}

html[data-theme="dark"] #statistics_full_screen > img {
	filter: invert(0.9);
}

#statistics_full_screen:disabled {
	display: none;
}

.statistics-button:hover:not(:disabled) {
	cursor: pointer;
	background-color: var(--gatling-hover-color);
}

.statistics-in .expand-button.expand {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 2px;
	height: 10px;
	background: url('expand.svg');
	background-size: contain;
}

.statistics-in .expand-button.collapse {
	content: '';
	display: inline-block;
	vertical-align: middle;
	width: 2px;
	height: 10px;
	background: url('sort-down.svg');
	background-size: contain;
}

html[data-theme="dark"] .statistics-in .expand-button.collapse,
html[data-theme="dark"] .statistics-in .expand-button.expand {
	filter: invert(0.9);
}

.nav .expand-button {
	padding: var(--gatling-spacing-small) var(--gatling-spacing);
}

.nav .expand-button.expand {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 8px;
	background: url('expand.svg') no-repeat;
	background-size: contain;
	cursor: pointer;
	margin-top: 6px;
}

.nav .expand-button.collapse {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 8px;
	background: url('sort-down.svg') no-repeat;
	background-size: contain;
	cursor: pointer;
	margin-top: 6px;
}

html[data-theme="dark"] .nav .expand-button.expand,
html[data-theme="dark"] .nav .expand-button.collapse {
	filter: invert(0.9);
}

.right {
	display: flex;
	align-items: center;
	gap: var(--gatling-spacing);
	float: right;
	font-size: var(--gatling-font-size-default);
}

.withTooltip {
	outline: none;
}

.withTooltip:hover {
	text-decoration: none;
}

.withTooltip .tooltipContent {
	position: absolute;
	z-index: 10;
	display: none;

	background: var(--gatling-orange-color);
	-webkit-box-shadow: 1px 2px 4px 0px rgba(47, 47, 47, 0.2);
	-moz-box-shadow: 1px 2px 4px 0px rgba(47, 47, 47, 0.2);
	box-shadow: 1px 2px 4px 0px rgba(47, 47, 47, 0.2);
	border-radius: var(--gatling-border-radius);
	color: var(--gatling-light-color);
	margin-top: -5px;
	padding: var(--gatling-spacing-small);
}

.withTooltip:hover .tooltipContent {
	display: inline;
}

.button-modal {
	padding: var(--gatling-spacing-small);
}

.button-modal > img {
	width: 14px;
	height: 14px;
}

html[data-theme="dark"] .button-modal > img {
	filter: invert(0.9);
}

.statistics-table-modal {
	background-color: var(--gatling-background-color);
	height: calc(100% - 60px);
	width: calc(100% - 60px);
	border-radius: var(--gatling-border-radius);
}

.statistics-table-modal::backdrop {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;

	background-color: rgba(100, 100, 100, 0.9);
}

.statistics-table-modal-container {
	display: flex;
	flex-direction: column;

	width: 100%;
	height: calc(100% - 35px);
	overflow-x: auto;
}

.button-modal {
	cursor: pointer;

	height: 25px;
	width: 25px;

	border: 1px solid var(--gatling-border-color);
	background-color: var(--gatling-light-color);
	border-radius: var(--gatling-border-radius);
	color: var(--gatling-text-color);
}

.button-modal:hover {
	background-color: var(--gatling-background-color);
}

.statistics-table-modal-header {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;

	padding-bottom: var(--gatling-spacing);
}

.statistics-table-modal-content {
	flex: 1;
	overflow-y: auto;
	min-width: 1050px;
}

.statistics-table-modal-footer {
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;

	padding-top: var(--gatling-spacing);
}