body {
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  margin: auto;
  background-color: #333333 !important;
  color: #fff;
  font-family: "Roboto", sans-serif;
}

#main {
  width: 85%;
  height: 100vh;
  margin: auto;
}

#col-left{
  height: 100vh;
  padding-top: 5vh;
}

#col-right{
  height: 100vh;
  max-height: 100vh;
  padding-top: 5vh;
  overflow: hidden;
}

#config{
  max-height : 60vh;
  overflow-y: scroll 
}

/* #col-right::-webkit-scrollbar {
  width: 0.5em;
}
 
#col-right::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}
 
#col-right::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
} */

#paramdiv {
  padding-top: 20px;
}

.accordion {
  color: #000;
}

#renderCanvas {
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  touch-action: none;
  border: 0.2rem solid;
  border-radius: 25px;
  border-color: #333333;
}

.bd-example-modal-lg .modal-dialog {
  display: table;
  position: relative;
  margin: 0 auto;
  top: calc(50% - 48px);
}

.bd-example-modal-lg .modal-dialog .modal-content {
  background-color: transparent;
  border: none;
}

.copyright {
  color: #fff;
  font-size: 10px;
  position: absolute;
  bottom: 20px;
  right: 0;
  padding-right: 20px;
  padding-left: 20px;
  opacity: 0.7;
  z-index: 1;
}

.parent {
  position: relative;
}

.titre {
  margin: auto;
  text-align: center;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 2.2rem;
}

.frac {
  display: inline-block;
  position: relative;
  vertical-align: middle;
  letter-spacing: 0.001em;
  text-align: center;
}
.frac > span {
  display: block;
  padding: 0.1em;
}
.frac span.bottom {
  border-top: thin solid black;
}
.frac span.symbol {
  display: none;
}

/* On md screen */

@media (max-width: 990px) {
  body {
    height: 100%;
    overflow: auto;
  }
  #main {
    height: 100%
  }
  #col-left{
    height: 62vh;
    padding-top: 3vh;
  }
  #renderCanvas {
    height: 55vh;
  }
}