/*----------------------------------------*/
/***** Stylesheet for the hover index *****/
/*----------------------------------------*/

/* Place rectangles in a grid */
.grid {
  position: relative;
  /* each rectangle is dependant of others */
  margin: 0 auto;
  padding: 1em 0 4em;
  /* padding top horizontal bottom */
  display: grid;
  /* type of boxes generated */
  max-width: 1000px;
  list-style: none;
  /* no item */
  text-align: center;
  column-gap: 2em;
  /* space between columns */
}

/* Figure inside grid */
.grid figure {
  position: relative;
  float: left;
  overflow: hidden;
  /* overflow not taken into account */
  margin: 10px 1%;
  width: 100%;
  /* 100% of the column */
  background: #3085a3;
  text-align: center;
  cursor: pointer;
  /* change shape cursor */
  border-radius: 30px;
  /* rounded corners */
}

/* Each figure contains an img */
.grid figure img {
  position: relative;
  display: block;
  max-height: 100%;
  max-width: 100%;
  opacity: 1;
  /* over a dummy image */
}

/* Style caption (title of benchmarks) */
.grid figure figcaption {
  padding: 0.1em;
  /* add space */
  color: #fff;
  /* writing color */
  text-transform: uppercase;
  /* title in uppercase */
  font-size: 1.25em;
}

/* Small sized screens */
@media (min-width: 600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* split in 2 columns */
}

/* Larger sized screens */
@media (min-width: 900px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* split in 3 columns */
}

/* Position and style of <a> elements (the View more) */
.grid figure figcaption,
.grid figure figcaption>a {
  position: absolute;
  top: 0em;
  /* no space offset top */
  left: 0;
  width: 100%;
  height: 100%;
}

/* only to figcaption <a> tag */
.grid figure figcaption>a {
  z-index: 1000;
  /* top level */
  text-indent: 0%;
  white-space: nowrap;
  font-size: 0;
  /* do not display the View more */
  opacity: 1;
}

/* h2: Problem name (LASSO, ...) */
.grid figure h2 {
  word-spacing: 0em;
  font-weight: 300;
}

.grid figure h2 span {
  font-weight: 800;
}

.grid figure h2,
.grid figure p {
  margin: 0;
}

/* p: number of files */
.grid figure p {
  letter-spacing: 1px;
  font-size: 70%;
}

/* Default color */
figure.effect-ruby {
  height: 150px;
  background-color: #2c3e50;
}

/* Color when hovering */
figure.effect-ruby:hover {
  background-color: DodgerBlue;
}

/* Define transformation */
figure.effect-ruby img {
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  /* transition time */
  transform: scale(1.15);
  /* size transformation -> bigger */
}

/* transformation with hovering */
figure.effect-ruby:hover img {
  opacity: 0;
  transform: scale(1);
  /* size -> smaller */
}

/* Apply effect to problem name */
figure.effect-ruby h2 {
  margin-top: 0;
  transition: transform 0.35s;
  /* transition time */
  transform: translate3d(0, calc((150px - 100%)/2), 0);
  font-size: 1.25em;
  /* default font */
}

figure.effect-ruby p {
  margin: 2em -1em 2em -1em;
  padding: 1em 0em 1em 0em;
  border: 1px solid #fff;
  /* create sort of white frame */
  opacity: 0;
  transition: opacity 0.35s, transform 0.35s;
  transform: translate3d(0, 20px, 0) scale(1.1);
  /* size transform */
}

/* Transform title on hover */
figure.effect-ruby:hover h2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0px, 10px, 0) scale(0.8);
  /* smaller */
  margin-top: 0em;
  /* move up */
}

figure.effect-ruby:hover p {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1.2);
  /* placement in box */
}

/* Button for inside the table with system informations */
.buttoncent {
  border: none;
  background-color: transparent;
  outline: none;
  text-align: center;
}

/* button for inside text
 in benchmark page above graph for system informations */
.buttonleft {
  border: none;
  background-color: transparent;
  outline: none;
  text-align: center;
  margin-left: 1px;
  /* add margin */
}


/* switch slider with an adaptable height.
Change switch-height and switch-padding, and all the dimensions are adjusted.
See https://stackoverflow.com/questions/70590125/how-to-change-the-size-of-a-css-toggle-switch */
* {
  --switch-height: 20px;
  --switch-padding: 2px;
  --switch-width: calc((var(--switch-height) * 2) - var(--switch-padding));
  --slider-height: calc(var(--switch-height) - var(--switch-padding));
  --slider-on: calc(var(--switch-height) - var(--switch-padding));
}

.switch {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  content: "";
  position: absolute;
  height: var(--slider-height);
  width: var(--slider-height);
  left: calc(var(--switch-padding) / 2);
  bottom: calc(var(--switch-padding) / 2);
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(var(--slider-on));
  -ms-transform: translateX(var(--slider-on));
  transform: translateX(var(--slider-on));
}

.slider.round {
  border-radius: var(--slider-height);
}

.slider.round:before {
  border-radius: 50%;
}

/*----------------------------------------*/
/***** Brand text animated *****/
/*----------------------------------------*/


.ml11 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.1em;
  padding-right: 0.05em;
  padding-bottom: 0.15em;
}

.ml11 .line {
  opacity: 0;
  position: absolute;
  left: 0;
  height: 100%;
  width: 3px;
  background-color: #fff;
  transform-origin: 0 50%;
}

.ml11 .line1 {
  top: 0;
  left: 0;
}

.ml11 .letter {
  display: inline-block;
  line-height: 1em;
  font-family: 'Kanit', sans-serif;
}

/*----------------------------------------*/
/***** Plot *****/
/*----------------------------------------*/

@media (min-width: 768px) {
  #unique_plot {
    flex: 1 1 0%;
  }
}

@media (max-width: 767px) {
  #unique_plot {
    flex: initial;
    flex-shrink: 0;
  }
}

.js-plotly-plot .plotly .modebar {
  transform: translateX(-30px);
}

/*----------------------------------------*/
/***** Custom legend *****/
/*----------------------------------------*/

#plot_legend {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#legend_title {
  font-size: 1.2rem;
  font-weight: bold;
}

#legend_help {
  font-size: 0.75rem;
  color: #475569;
}

.space-r-2>* {
  margin-right: 0.5rem;
}


.objective-description-content {
  visibility: hidden;

  background-color: rgb(55 65 81);
  color: #fff;
  border-radius: 6px;
  margin-top: 1.5em;
  padding-right: 0.5em;
  padding-left: 0.5em;
  padding-top: 1em;
  padding-bottom: 1em;
  opacity: 90%;
  max-width: 80ch;
  max-height: 200px;

  overflow-y: auto;
  white-space: pre-wrap;
  position: absolute;
  z-index: 99999;
}

.objective-description-trigger {
  display: flex;
  flex-direction: row;
}

.objective-description-icon {
  width: 1.25rem;
  align-self: center;

  border-radius: 50%;
}

.objective-description-trigger:hover .objective-description-content {
  visibility: visible;
}

/* Description solver when hovered */
.solver-description-container {
  position: relative;
  display: inline-flex;
}

.solver-description-content {
  display: flex;
  flex-direction: column;
  visibility: hidden;
  background-color: rgb(55 65 81);
  color: #fff;
  border-radius: 6px;
  padding-top: 0.5em;
  padding-bottom: 0.6em;
  padding-left: 0.5em;
  padding-right: 0.5rem;
  opacity: 90%;

  width: max-content;
  max-width: 80ch;
  max-height: 500px;
  white-space: pre-wrap;

  /* position description with respect to container and put it top-center */
  position: absolute;
  transform: translate(0, -100%);
  z-index: 99999;
}

/* Show description when hovered */
.solver-description-container:hover .solver-description-content {
  visibility: visible;
}

/*Arrow at the bottom of the description*/
.solver-description-container .solver-description-content::after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 20px;
  margin-left: -5px;
  border-width: 7px;
  border-style: solid;
  border-color: rgb(55 65 81) transparent transparent transparent;
}

.solver-description-title {
  margin-bottom: 1em;
  font-weight: bolder;
}

.solver-description-body {
  max-height: 450px;
  overflow-y: auto;
}

/*Plot config styling as a bag of tags*/
#plot_config_title {
  font-weight: bold;
}

.config-item, .config-ctrl {
  border-radius: 9999px;
  padding-left: 1em;
  padding-right: 1em;
  color: white;
  margin-left: 2ex;

  cursor: pointer;

  /* font styles*/
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
}

.config-item {
  background-color: rgb(91, 78, 255);
  border-color: rgb(55 65 81);
}
.config-ctrl {
  font-size: medium;
  font-weight: bold;
  background-color: rgb(34, 30, 94);
  border-color: rgb(23, 37, 59);
}

.view_selector_label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.view_selector_select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  border-width: 1px;
  font-size: 1rem;
  line-height: 1.5rem;
  --tw-shadow: 0 0 #0000;
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.view.active {
  border-color: rgb(37 99 235);!important;
  color: rgb(37 99 235);!important;
}

/* Hide q1, q3, max, min, upper fence, lower fence on boxplot */
g.hovertext:has(path + [data-unformatted*="q1"]),
g.hovertext:has(path + [data-unformatted*="q3"]),
g.hovertext:has(path + [data-unformatted*="max"]),
g.hovertext:has(path + [data-unformatted*="min"]),
g.hovertext:has(path + [data-unformatted*="upper fence"]),
g.hovertext:has(path + [data-unformatted*="lower fence"])
{
    display: none;
}