.form-control:focus {
  box-shadow: 0 0 black;
  background-color: rgba(255, 255, 255, 0);
  color: rgb(52, 152, 219);
}

.group {
  position: relative;
}

.group input,
.group select {
  font-size: 16px;
  padding: 10px 10px 0px 5px;
  -webkit-appearance: none;
  display: block;
  color: rgb(52, 152, 219);
  width: 100%;
  background-color: rgba(255, 255, 255, 0);
  border: none;
  border-radius: 0;
  border-bottom: 1px solid hsl(210, 3%, 41%);
  position: relative;
}

input:focus,
select:focus {
  outline: none;
}

/* Label */

.group label {
  color: hsl(210, 3%, 41%);
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  padding-left: 5px;
  top: 10px;
  transition: all 0.2s ease;
}

/* active */

.group input:focus ~ label,
.group select:focus ~ label {
  top: -12px;
  padding-left: 5px;
  font-size: 14px;
  color: rgb(52, 152, 219);
}

.group input.used ~ label,
.group select.used ~ label {
  top: -12px;
  font-size: 14px;
  color: hsl(210, 3%, 41%);
}

/* Underline */

.bar {
  position: relative;
  display: block;
  width: 100%;
}

.bar:before,
.bar:after {
  content: "";
  height: 2px;
  width: 0;
  bottom: 0px;
  position: absolute;
  background: rgb(52, 152, 219);
  transition: all 0.2s ease;
}

.bar:before {
  left: 50%;
}

.bar:after {
  right: 50%;
}

/* active */

.group input:focus ~ .bar:before,
.group input:focus ~ .bar:after,
.group select:focus ~ .bar:before,
.group select:focus ~ .bar:after {
  width: 50%;
}


.mobile-nav .dropdown-menu .dropdown-item:active, .nav-menu .dropdown-menu .dropdown-item:active{
  background-color: initial;
  color: rgb(52, 152, 219);

}