*{
    padding: 0px;
    margin: 0px;
    /* box-sizing: border-box; */
}

.hero {
    background: #eee;
    padding: 20px;
    border-radius: 10px;
    margin-top: 1em;
}

.hero h1 {
    margin-top: 0;
    margin-bottom: 0.3em;
}

.c4 {
    padding: 10px;
    box-sizing: border-box;
}

.c4 h3 {
    margin-top: 0;
}

.c4 a {
    margin-top: 10px;
    display: inline-block;
}
/******
For Grid
*********/
form {
    display: grid;
    padding: 1em;
    background: #f9f9f9;
    border: 1px solid #c1c1c1;
    margin: 2rem auto 0 auto;
    max-width: 600px;
    padding: 1em;
  }
  form input {
    background: #fff;
    border: 1px solid #9c9c9c;
  }
  form button {
    background: lightgrey;
    padding: 0.7em;
    width: 100%;
    border: 0;
  }
  form button:hover {
    background: gold;
  }
  
  label {
    padding: 0.5em 0.5em 0.5em 0;
  }
  
  input {
    padding: 0.7em;
    margin-bottom: 0.5rem;
  }
  input:focus {
    outline: 3px solid gold;
  }
  
  /* @media (min-width: 400px) { */
    form {
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
    }
  
    label {
      text-align: right;
      grid-column: 1 / 2;
    }
  
    input,
    button {
      grid-column: 2 / 3;
    }

    .load-content{
        grid-column: 2 / 3;
    }

    .slider-content{
      grid-column: 1 / 3;
      display: grid;

    }

    .labels{
        margin-top: 10px;
        font-weight: bold;
        font-size: 18px;
    }

    .simple-labels{
      font-weight: bold;
      font-size: 18px;
    }

    /* .dim-elements{
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
    } */
    #dim-value-slider{
      width: 60%;
    }
    #dim-value{
      font-weight: bold;
      color: #0e91e9;
    }
    .center{
      text-align: center;
    }
  
  /****For Range Slider Styling**************/
  /* Credit goes to :: https://www.cssportal.com/style-input-range/ */
  input[type=range] {
    height: 38px;
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
  }
  input[type=range]:focus {
    outline: none;
  }
  input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: #3071A9;
    border-radius: 5px;
    border: 1px solid #000000;
  }
  input[type=range]::-webkit-slider-thumb {
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 30px;
    width: 15px;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -11px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #3071A9;
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 1px 1px 1px #000000;
    background: #3071A9;
    border-radius: 5px;
    border: 1px solid #000000;
  }
  input[type=range]::-moz-range-thumb {
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 30px;
    width: 15px;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #3071A9;
    border: 1px solid #000000;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #000000;
  }
  input[type=range]::-ms-fill-upper {
    background: #3071A9;
    border: 1px solid #000000;
    border-radius: 10px;
    box-shadow: 1px 1px 1px #000000;
  }
  input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 1px 1px 1px #000000;
    border: 1px solid #000000;
    height: 30px;
    width: 15px;
    border-radius: 5px;
    background: #FFFFFF;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #3071A9;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #3071A9;
  }  