@font-face {
  font-family: "Rajdhani-Medium";
  src: url(/static/ccperf/fonts/Rajdhani-Medium.ttf); }

@font-face {
  font-family: "Rajdhani-Bold";
  src: url(/static/ccperf/fonts/Rajdhani-Bold.ttf); }

@font-face {
  font-family: "Rajdhani-SemiBold";
  src: url(/static/ccperf/fonts/Rajdhani-SemiBold.ttf); }

table td {
  padding: 0em 0.5em 0em 0em;
}

table th {
  padding: 0em 0.5em 0em 0em;
  font-size: 100%;
  text-align: left;
}

figure {
  text-align: center; /* Center-align the contents horizontally */
}

figure img {
  width: 40%; /* Make the image fill the width of its container */
  height: auto; /* Maintain the aspect ratio */
}

.chart-container {
  width: 80%;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.charts-container-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.figures img {
    width: 80%;
    height: auto;
    text-align: center; /* Center-align the contents horizontally */
    display: flex;
    justify-content: center; /* Center-align the image horizontally */
    align-items: center; /* Center-align the image vertically */
}

#header img {
    padding-right: 10px;
    opacity: 1;
}

#header {
  /* webkit-box-shadow: 0 -2px 30px 0 rgba(26, 105, 149, 0.3); */
  box-shadow: 0 -2px 30px 0 rgba(26, 105, 149, 0.3);
}

#header a {
  text-decoration: none;
}

#header img, .site-name {
  font-size: 40px;
  font-family: Rajdhani-Medium, sans-serif;
  color: #333;
  text-decoration: none;
  vertical-align: middle;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
}

footer {
    padding: 0px 0;
    text-align: right;
}

#sidebar {
  /* font-size: 40px; */
  /* font-family: Rajdhani-Medium, sans-serif; */
  webkit-box-shadow: 0 -2px 30px 0 rgba(26, 105, 149, 0.3);
  box-shadow: 0 -2px 30px 0 rgba(26, 105, 149, 0.3);
  color: #333;
  /* horizontal-align: middle; */
}

#index {
  width: 60%;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
}

#index_image {
    text-align: center;
    margin-top: 20px;
}

#index_image img {
    max-width: 100%;
    height: auto;
    width: 50%;
}

h1 {
  text-align: center;
  margin: 0em 0em 0.5em 0em;
}

.experiment_introduction {
  width: 80%;
}

.metrics {
  width: 80%;
}

.w-80 {
  width: 80%;
}

#experiment_command {
  width: 80%;
}

#legal_notices {
  bottom: 0px;
  margin-top: 0.5em;
  text-align:center;
}

.experiment-tab {
  position: relative;
  margin-left: 2px;
  margin-right: 2px;
  max-width: 100%
}

.scrollable {
  width:100%;
  overflow-y: auto;
  height: 85vh
}