body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.dtc_button {
    background: #ddd;
    color: black;
    height: 30px;
    width: 100px;
    margin: 5px 10px 5px 0;
    border: 1px solid #808080;
    /*box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);*/
    border-radius: 5%;
    font-weight: normal;
    /*padding: 2px 5px 2px 5px;*/
}

.dtc_checkbox {
    width: 40px;
    height: 40px;
    background: #ddd;
    margin: 5px 20px;
    border-radius: 100%;
    position: relative;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
}

.dtc_checkbox label {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 100px;
    transition: all .5s ease;
    cursor: pointer;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 1;
    background: #ea4335;
    box-shadow: inset 0px 1px 3px rgba(0,0,0,0.5);
}

.dtc_checkbox input[type=checkbox]:checked + label {
    background: #26ca28;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.top-wrapper {
    position: fixed;
    padding-top: 15px;
    padding-left: 15px;
    width: 100%;
    background-color: rgba(255, 255, 255, 1);
    z-index: 10;
}

.bottom-wrapper {
    width: 100%;
    padding-top: 160px;
    padding-left: 15px;
    z-index: 5;
    overflow-x: scroll;
}