/* Miscellanious */

#hero-num:hover {
  color: gray;
}

.textcap {
  text-transform: capitalize;
}

/* 6 Services Radio Buttons Styling */

label.btn {
  background-color: #d8d8d8;

  color: black;

  border: solid #262626 2px;

  font-weight: bold;

  text-align: center;

  font-size: 1.05rem;

  line-height: 18px;

  width: 100%;

  border-radius: 5px;

  box-shadow: 5px 5px 15px -2px rgba(0, 0, 0, 0.452);

  padding: 5px;

  padding-top: 10px;
	
  transition: all 100ms ease-in;


	
  
}

label {
  text-align: left;
}

label.btn {
	
}

label img {
  filter: brightness(0) invert(0.07);

  width: 100%;

  max-width: 75px;

  max-height: 100px;

  user-zoom: none;

  user-select: none;

  -moz-user-select: none;

  -webkit-user-drag: none;

  -webkit-user-select: none;

  -ms-user-select: none;
}

div.btn-group label.btn:hover {
  
  -webkit-box-shadow: 0px 10px 13px -7px #353535,
    5px 5px 15px 5px rgba(0, 0, 0, 0);

  box-shadow: 0px 10px 13px -7px #353535, 5px 5px 15px 5px rgba(0, 0, 0, 0);

  border: solid black 2px;
	

}



div.btn-group label.active:hover img {
  filter: brightness(0) invert(1);
}

label.active img {
  filter: brightness(0) invert(1);

  user-zoom: none;

  user-select: none;

  -moz-user-select: none;

  -webkit-user-drag: none;

  -webkit-user-select: none;

  -ms-user-select: none;


}


div.btn-group label:not(.disabled).active,
div.btn-group label:not(.disabled):active,
div.btn-group .show > label.dropdown-toggle {


  background-color: rgba(0, 0, 0, 0.9);

  color: white;

  border: solid #3d3d3d 2px;

  -webkit-box-shadow: 0px 10px 13px -7px #353535,
    5px 5px 15px 5px rgba(0, 0, 0, 0);

  box-shadow: 0px 10px 13px -7px #353535, 5px 5px 15px 5px rgba(0, 0, 0, 0);
}

input[type="radio"] {
  display: none;
}

#form-heading {
  font-size: 4.25rem;
  line-height: 50px;
}

/* Label Media Query */

@media (max-width: 500px) {
  div#services-step div.col-4 {
    padding-left: 4px;

    padding-right: 4px;
  }

  #form-heading {
    font-size: 3.3rem;
	line-height: 33px;
  }

  label.btn {
    font-size: 0.9rem;
  }
	
	#stepped {
		margin-left: 8px;
		margin-right: 8px;
	}
}

/* ---------- Help Tip Styling -----*/

.help-tip {
  position: absolute;

  top: 42px;

  right: 22px;

  text-align: center;

  background-color: #dfdfdf;

  border-radius: 50%;

  border: 2px solid darkgrey;

  width: 20px;

  height: 20px;

  font-size: 13.5px;

  line-height: 17px;

  cursor: default;
}



.help-tip:before {
  content: "?";

  font-weight: bold;

  color: rgb(126, 126, 126);
}

.help-tip:hover p {
  display: block;

  transform-origin: 100% 0%;

  -webkit-animation: fadeIn 0.3s ease-in-out;

  animation: fadeIn 0.3s ease-in-out;
}

.help-tip p {
  /* The tooltip */

  display: none;

  text-align: left;

  background-color: #1e2021;

  padding: 15px;

  width: 200px;

  position: absolute;

  border-radius: 3px;

  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);

  bottom: 40px;

  right: -7px;

  color: #fff;

  font-size: 13px;

  line-height: 1.4;
}

.help-tip p:before {
  /* The pointer of the tooltip */

  position: absolute;

  content: "";

  width: 0;

  height: 0;

  border: 6px solid transparent;

  border-top-color: #1e2021;

  right: 7px;

  top: 82px;
}

.help-tip p:after {
  /* Prevents the tooltip from being hidden */

  width: 100%;

  height: 40px;

  content: "";

  position: absolute;

  top: -40px;

  left: 0;
}

/* CSS animation */

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;

    transform: scale(0.6);
  }

  100% {
    opacity: 100%;

    transform: scale(1);
  }
}


/*Form Styling Hidden + Non Centered Inputs*/

.hidden {
  display: none;
}

.input-group-text {
  text-align: center;
}

.new-form-select {
  width: 100%;

  height: calc(1.5em + 0.75rem + 2px);

  border-radius: 0.25rem;

  padding: 0px 10px;

  background-color: white;

  color: #495057;

  font-size: 1rem;

  border: 1px solid #ced4da;
	
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  
}

.btn-dark {
  background-color: #1f1f1f;
}

/* Form Footer Styling + Custom Image Path */

.form-footer-border {
  border-top: 7px solid transparent;

  border-image: url(https://www.heavyhaulers.com/images/hh-label-icons/hh-form-footer-border.jpg)
    20 round;
}

/* Steps Circles Styling */

.form-container {
  background-image: url(https://www.heavyhaulers.com/images/hh-label-icons/grey-concrete-bg.jpg);

  background-size: contain;

  background-position: center;
}

.bg-warning {
  color: black !important;
  background-color: #ffc107 !important;
  font-weight: bolder;
	
}



/* Submit Button */

#submit {
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

#submit:hover {
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);

  background-color: black;

  color: white;

  border: 1px solid black;
}

/* Media Quieries */

@media (min-width: 769px) {
  #step3-3 {
    margin-bottom: -114px;
  }

  #date {
    margin-bottom: 60px;
  }
}

@media (min-width: 769px) and (max-width: 997px) {
  .prev-next-buttons {
    padding-right: 50px;
  }
}

@media (min-width: 1000px) and (max-width: 1200px) {
  .prev-next-buttons {
    padding-right: 0;
  }
}

/* Form Inputs + Form Label Targetted Styling */

label {
  color: black;

  font-weight: bold;

  text-align: left;

  font-family: "Yantramanav", sans-serif;

  font-size: 19px;
}

div.steps label {
  margin-bottom: 7px;

  font-size: 1rem;
}

div.form-group label,
div.form-select label {
  font-size: 1.15rem;
}

.form-inputs {
  display: block;

  width: 100%;

  height: calc(1.5em + 0.75rem + 2px);

  padding: 0.375rem 0.75rem;

  font-size: 1rem;

  font-weight: bold;

  line-height: 1.5;

  color: black;

  background-color: white;

  border: solid 2px #777777;

  background-clip: padding-box;

  border-radius: 0.25rem;

  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-inputs:focus,
.form-control:focus {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.35);
}

.form-inputs:focus {
  border: solid 2px #444444;
}

/* Core Form Stlying + Steps Styling*/

.indicators * {
  transition: all 0.4s ease-out;
}

.steps {
  position: absolute;

  width: 0;

  height: 100%;

  top: 0;

  left: 0;

  z-index: -1;

  visibility: hidden;

  opacity: 0;

 
}

.steps.active {
  width: 100%;

  position: relative;

  z-index: 0;

  visibility: visible;

  opacity: 1;

  
}

/* animation for input boxes */

.form-control.invalid {
  border: 2px solid #ec2626 !important;

  /* paste any animation you want */

  animation: shaking 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;

  transform: translate3d(0, 0, 0);

  backface-visibility: hidden;

  perspective: 1000px;

  transition: all 0.4s ease-in-out;
}

@keyframes shaking {
  10%,
  90% {
    transform: translate3d(-2px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(4px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-8px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(8px, 0, 0);
  }
}

.hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition: all 200ms ease-in-out;
}

.show {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transition: all 200ms ease-in-out;
}

/* To Be Determined */

#shadow {
    -webkit-box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.57);
box-shadow: 0px 0px 36px -4px rgba(0,0,0,0.57);
}
		
/*
		.form-neg-bottom{
			margin-bottom: -200px;
		}
*/