.m-t-5 {
	margin-top: 5%;
}

.m-t-8 {
	margin-top: 8%;
}

.main {
    background-position: center center;
    background-size: cover;
    height: auto;
    left: 0;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    top: 0;
    width: auto;
}

.main .content {
    position: relative;
    z-index: 4;
}

.has-error {
  color: red;
  font-size: 15px;
}

.sub-text {
  font-size: 15px;
  font-weight: bold; 
  margin-bottom: 30px; 
  margin-top: 20px;
  color: #222348;
}

.btn-primary {
    color: #fff;
    background-color: #222348 !important;
    border-color: #222348 !important;
}

.check-usage {
  border-radius: 10px;
}

.check-usage:hover {
  transform: scale(1.1);
}

.form-control {
  font-size: 15px !important;
}

input[type="text"] {
  color: #878f97;
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 100%;
  padding: 8px 8px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .btn, .btn-group {
        width:100%;
    }
}

@keyframes blink {
  /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
  0% {
    opacity: 0.2;
  }
  /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
  20% {
    opacity: 1;
  }
  /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
  100% {
    opacity: 0.2;
  }
}

.saving span {
  /**
     * Use the blink animation, which is defined above
     */
  animation-name: blink;
  /**
     * The animation should take 1.4 seconds
     */
  animation-duration: 1.4s;
  /**
     * It will repeat itself forever
     */
  animation-iteration-count: infinite;
  /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
  animation-fill-mode: both;
}

.saving span:nth-child(2) {
  /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
  animation-delay: 0.2s;
}

.saving span:nth-child(3) {
  /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
  animation-delay: 0.4s;
}