*, *:before, *:after{
  box-sizing: border-box;
}

td, th {
  border-collapse: collapse;
  width: 4rem;
  height: 2rem;
  border: 1px solid #ccc;
  text-align: center;
}

th {
  background: lightblue;
  border-color: 1px solid #ccc;
}

body {
  padding: 1rem;
  background: #f5f5f5;
}

.top_section {
    width: 100%;
    height:50%;
    border: 4px dotted blue;
}

#dial {
  border-collapse: collapse;
  width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.input_delta {
  padding: 10px;
  margin:10px 10px;
  /*border:0;
  box-shadow:0 0 15px 4px rgba(0,0,0,0.6);*/
  border-radius:10px;
  width:25%;
}

#calc_button {

  height: 1em;
  width: 30%;

  border-radius: 1em;

  font-size: 1.5em;
  font-weight: bold;
  color: #333;

  /* padding defines the width of the red gradient background (2) */
  padding: .25em;

  /* border-width defines the width the blue gradient background (3) */
  border: .25em solid transparent;

  background:
    /* (1) most inner gradient */
    linear-gradient(to bottom, #fff, #bbb) content-box,
    /* (2) red gradient */
    linear-gradient(to right, #e94332, #a91302) padding-box,
    /* (3) blue gradient */
    linear-gradient(to right, #0867a6, #4aa9e8) border-box;
}


#calculate_button {

  /* remove default behavior */
  appearance:none;
  -webkit-appearance:none;

  /* usual styles */
  padding:10px;
  border:none;
  background-color:slategrey;
  color:#fff;
  font-weight:400;
  border-radius:5px;
  width:40%;
}

#v1_dial_button {
    display:block;
    width:90px;
    height:90px;
    line-height:90px;
    border: 2px solid #f5f5f5;
    border-radius: 50%;
    color:#f5f5f5;
    text-align:center;
    text-decoration:none;
    background: #555777;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    margin-left: auto;
    margin-right: auto;

}

input[type=number]:focus {
  background-color: 'white';
  border-color: #000;
}

#leftbox {
    float: left;
    height:30%;
    size: auto;
    width:22%;
    /*border: 4px dotted green;*/
}

#img1 {
    border-collapse: collapse;
    float:left;
    /*margin-left:2%;*/
    margin-right:2%;
    margin-top: 2%;
    margin-left:2%;
    width:80%;
    /*border: 4px dotted red;*/
}


#table1 {
    border-collapse: collapse;
    float:left;
    /*margin-left:2%;*/
    margin-right:2%;
    margin-top: 2%;
    width:60%;
    /*border: 4px dotted red;*/
}

#table2 {
    border-collapse: collapse;
    float:left;
    /*margin-left:2%;*/
    margin-right:2%;
    margin-top: 2%;
    width:60%;
    /*border: 4px dotted red;*/
}

#rightbox{
    margin-left:81%;
    position: fixed;
    float:right;
    width:10%;
    height:280px;
    margin-top: 23%;
}

#rightbox-od5{
    margin-left:81%;
    position: fixed;
    float:right;
    width:10%;
    height:280px;
    margin-top: 15%;
}



#delta_text {
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 2rem;
  color: darkred;
  margin-left: 2%;

}

#dial_text {
  text-align: center;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 20px;
  color: cornflowerblue;
}

#blankleft {
  float: left;
  height:30%;
  size: auto;
  width:20%;
  margin-top: 2%;
}

#topleft {
    float: left;
    size: auto;
    width: 90%;

    border-top-left-radius: 37px 140px;
    border-top-right-radius: 23px 130px;
    border-bottom-left-radius: 110px 19px;
    border-bottom-right-radius: 120px 24px;
    position: left;
    border: solid 3px #6e7491;
    padding: 10px;
    font-size: 20px;

    transform: rotate(-1deg);
    box-shadow: 3px 15px 8px -10px rgba(0, 0, 0, 0.3);
    transition: all 0.13s ease-in;

}

#topmid {
    float:left;
    margin-left:2%;
    margin-right:2%;
    width:60%;
    border: 4px dotted green;
}

#topright {
    margin-bottom:2%;
    float:right;
    width:2 0%; /*This is INTERESTING*/
}

.sketchy {
    float:left;
    margin-top: 1%;
    margin-left:1%;
    margin-right:1%;
    width:60%;
    padding: 1rem 1rem;
    display: inline-block;
    border: 3px solid #333333;
    font-size: 2rem;
    border-radius: 2% 6% 5% 4% / 1% 1% 2% 4%;
    letter-spacing: 0.1ch;
    background: #ffffff;
    position: relative;


    &::before {
        content: '';
        border: 1px solid #353535;
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(0.5deg);
        border-radius: 1% 1% 2% 4% / 2% 6% 5% 4%;
    }
}