div.plot3d-container {
    padding: 1em;
    border: 1px solid black;
}

.plotly{
    height: 25em;
    margin: auto;
}

.sliderContainer{
    width: 60%;
    padding: 0em 1em 0em 1em;
    margin: 0.4em;
    /*border: 1px solid black;*/
    display:flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
}

.slider {
    position: relative;
    width: 80%;
}

.sliderValue{
    position:absolute;
    margin: 0em;
}

.sliderValue.left{
    left: 0.5em;
}

.sliderValue.right{
    right: 0em;
}

.grid-container {
    display: grid;
    grid-template-columns: 7em 1em 4em 1em 4em 1em 4em 1em;
    grid-column-gap: 0.3em;
    grid-row-gap: 0.3em;
  }

input {
    text-align: right;
}

.uxMessege {
    font-size: smaller;
    visibility: hidden;
    display: none;
}

@media only screen and (max-width: 600px) {
    .plotly{
        height: 15em;
    }
    .sliderContainer{
        width: 100%;
        padding: 0em 1em 0em 1em;
    }
    .slider {
        width: 75%;
    }
    .sliderValue.left{
        left: 0.2em;
    }
    .sliderValue.right{
        right: 0.2em;
    }
    .grid-container {
        display: grid;
        grid-template-columns: 4em 1em 3em 1em 3em 1em 3em 1em;
        grid-column-gap: 0.3em;
      }

    .uxMessege {
        visibility: visible;
        display: block;
    }
}