@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;400;600;800&display=swap');

/* bootstrap 5 */
.contaner { padding: 0px 0px 0px 0px; display: flex; }
.input-group-mb-3 { display: flex; width: fit-content;  margin: 1px 1px 1px 0px; flex: 0 0 auto; box-shadow: 2px 3px 4px -2px #333; border-radius: 1px 1px 5px 5px; }
.aqua:hover{ background-image: linear-gradient(#4dc47f,#b5ffd4); }

.input-group-text, .aqua { width: fit-content; border-radius: 5px 1px 1px 5px; background-color: lightgreen; margin-left: 0px; margin-right: 0px;/*background-image: linear-gradient(#4dc47f,#b5ffd4);*/}
.center-btn {margin-left: -1px; border-radius: 1px 1px 1px 1px; background-color: lightgreen; box-shadow: 0px 3px 4px -2px #333; margin-right: 0px;}
.form-control { width: 51%; border-radius: 1px 5px 5px 1px; height: auto; margin-left: 0px; background-color: lightgreen;  }/**/

.form-control-hidden { width: 101%; height: 101%; }

.btn { width: 100%;  }
.btn-group { margin: 1px; margin-left: 5px; }
.browse {display: none;}
#myChart { height: 0px; }

.down-arrow { border: solid black;
      border-width: 0 1px 1px 0;
      display: inline-block;
      padding: 3px;
      margin: 2px;
      transition: transform 0.3s;
      transform: rotate(45deg); }

#parameters { /* border: 1px black; background: rgba(ff, 0, 0, 0); appearance: none; */ }
select, #protocol, #parameters { height: auto; cursor: pointer; }
.btn, #parameters, .aqua { font-family: "DejaVu Sans Light", "Oxanium"; font-weight: 200; color: black; font-size: 14px; cursor: pointer; }

#tbl  { position: relative; top: 0%; left: 5%; margin-top: 3%;}
#canvasContainer { width:85%; position: fixed; top: 12%; left: 7%; background: white; z-index: 7; box-shadow: 2px 3px 4px -2px #333; }