.cm-toggle {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    border: 0;
    outline: 0;
    cursor: pointer;
    margin: 10px;
  }

  /* To create surface of toggle button */
  .cm-toggle:after {
    content: "";
    width: 60px;
    height: 28px;
    display: inline-block;
    background: rgba(196, 195, 195, 0.55);
    border-radius: 18px;
    clear: both;
  }

  /* Contents before checkbox to create toggle handle */
  .cm-toggle:before {
    content: "";
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    left: 0;
    top: -3px;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  }

  /* Shift the handle to left on check event */
  .cm-toggle:checked:before {
    left: 32px;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
  }
  /* Background color when toggle button will be active */
  .cm-toggle:checked:after {
    background: #16a085;
  }

  .cm-toggle,
  .cm-toggle:before,
  .cm-toggle:after,
  .cm-toggle:checked:before,
  .cm-toggle:checked:after {
    transition: ease 0.3s;
    -webkit-transition: ease 0.3s;
    -moz-transition: ease 0.3s;
    -o-transition: ease 0.3s;
  }
  #sloped-options,
  #flat-options {
    margin-left: 55px;
  }
  #concret-tile-question,
  #clay-tile-question,
  #asphalt-shingle-question,
  #flat-new-question {
    margin-left: 105px;
  }

  .message, .contact-form-message{
    color: red;
    font-style: italic;
  }

  @keyframes spinner {
    0% {
      transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    100% {
      transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
  }

  #get-sqft{
    padding-top: 15px;
  }
  .spin{
    margin-left: 30px;
  }
  .spin::before {
    animation: 1.5s linear infinite spinner;
    animation-play-state: inherit;
    border: solid 5px #cfd0d1;
    border-bottom-color: #1c87c9;
    border-radius: 50%;
    content: "";
    height: 25px;
    width: 25px;
    position: absolute;
    /* top: 10%;
    left: 10%; */
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
 }

 #quote-content{
  margin-top: 10px;
 }

 #sloped-percent, #flat-percent{
  margin-top: 5px;
 }

 /* #slider-sloped, #slider-flat, #slider-garage{
  margin-left: 15px;
  width: 45%;
 } */

.quote{
  font-weight: bold;
  font-size: x-large;
}

.disclaimer{
  font-style: italic;
}

.button {
  background-color: #000;
  /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.buttonGreen {
  background-color: #39FF14;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

input {
  height: 50px;
  font-size: 18px;
}

::placeholder {
  color: black;
  font-weight: bold;
  opacity: 1; /* Firefox */
}

::-ms-input-placeholder {
  /* Edge 12 -18 */
  color: black;
  font-weight: bold;
}