footer {
  background: #535353;
}

body, html {
  height: 100%;
}

.bg_img {
  background-image: url(/static/assets/img/illustrations/hero-bg2.png);
  min-height: 100vh;
  align-items: center;
}

/* Height for devices larger than 576px */
@media (min-width: 992px) {
  #intro {
    margin-top: -58.59px;
  }
}

.input_cus, .textarea_cus{
  background-color:rgb(255, 20, 20);
  color: #FFF;
}

form i {
  margin-left: -30px;
  cursor: pointer;
}

.inner-addon { 
  position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
position: absolute;
padding: 8px;

}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }


.upload-area {
    background: linear-gradient(135deg, #e0f7fa, #17f8ed);
    transition: background-color 0.3s ease, background 0.3s ease;
    border: 2px dashed #ccc;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 20px;
    border-radius: 5px;
}

.upload-area:hover {
    background: linear-gradient(135deg, #f4faa3, #f5f840);
}


/* Stil für den Slider */
.form-range {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  background: #ddd;
  border-radius: 5px;
  outline: none;
}

/* Griff des Sliders */
.form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border-radius: 50%;
  cursor: pointer;
}

.form-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}