.bg-light-blue-new {
    background-color: #7DA0FA;
    color: #fff;
}

.bg-light-purple-new {
    background-color: #7978E9;
    color: #fff;
}

.bg-dark-purple-new {
    background-color: #4747A1;
    color: #fff;
}

.bg-pink-new {
    background-color: #F3797E;
    color: #fff;
}

.bg-navbar-grey-new {
    background-color: #F5F7F8;
}

.text-light-purple-new {
    color: #7978E9;
}

.box-light-purple-new {
    border-top-color: #7978E9;
}

.text-dark-purple-new {
    color:#4747A1;
}

.select-round-border {
    border-radius: 7px;
    width: 65%;
    height: 32px;
    border:solid 1px rgba(121, 120, 233, 0.7);
    color: rgba(121, 120, 233, 0.6);
    font-size: 14px; 
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 10px;
    width: 100%;
  }
  
  .form__field {
    font-family: sans-serif;
    width: 100%;
    border: 0;
    border-bottom: 2px solid gray;
    outline: 0;
    font-size: 1.3rem;
    color: white;
    padding: 7px 0;
    background: transparent;
    transition: border-color 0.2s;
  
    &::placeholder {
      color: transparent;
    }
  
    &:placeholder-shown ~ .form__label {
      font-size: 1.3rem;
      cursor: text;
      top: 20px;
    }
  }
  
  .form__label {
    position: absolute;
    top: 0;
    display: block;
    transition: 0.2s;
    font-size: 1rem;
    color: gray;
    font-family: sans-serif;
    font-size: 14px;
  }
  
  .form__field:focus {
    ~ .form__label {
      position: absolute;
      top: 0;
      display: block;
      transition: 0.2s;
      font-size: 1rem;
      color: primary;
      font-weight:700;    
    }
    padding-bottom: 6px;  
    font-weight: 700;
    border-width: 3px;
    border-image: linear-gradient(to right, primary,secondary);
    border-image-slice: 1;
  }

  .form__field{
    &:required,&:invalid { box-shadow:none; }
  }

  @media (min-width: 768px) {
    .desktop-image {
        width: 300px;
        height: auto;
    }
    .mobile-image {
        display: none; 
    }
}


@media (max-width: 767px) {
    .desktop-image {
        display: none;
    }
    .mobile-image {
        width: 150px;
        height: auto;
    }
}

.btn-success-new {
  background-color: #7DA0FA;
  color: #fff;
}

.btn-primary-new {
  background-color: #7978E9;
  color: #fff;
}

.btn-secondary-new {
  background-color: #4747A1;
  color: #fff;
}

.btn-warning-new {
  background-color: #F3797E;
  color: #fff;
}

.btn-dark-new {
  background-color: #2F223A;
  color: #fff;
}

a {
  color:#000000;
  background-color: #ffffff;
}