.header {
  background: $gray-100;
  box-shadow: 0 2px 2px 0 rgba($gray-900, 0.16),
              0 0px 2px 0 rgba($gray-900, 0.12);
  top: 0;
  left: 0;
  right: 0;
  width: 100%;

  &__row {
    vertical-align: middle;
    display: flex;

    &--theme {
      display: none;
    }

    &--search {
      background-color: $secondary;
      padding: 5px;
    }
  }

  &__cell {

     &--links {
       display: flex;
       padding: 15px 25px;

       img {
         height: 20px;
       }

       i {
         font-size: 1.55em;
         color: $gray-500;

       }
     }

    &--search {
      font-size: 12px;
      width: 75%;
      height: 45px;
      margin: 3px;

      &-form {
        position: relative;
        border: 1px solid darken($secondary, 35%);
      }

      &-glass {
        height: 15px;
        width: 15px;
        position: absolute;
        top: 18px;
        left: 16px;
        opacity: 0.5;
        color: darken($secondary, 45%);
      }

      &-input  {
        width: 100%;
        border: none;
        background-color: transparent;
        height: 45px;
        padding-left: 45px;


        &[placeholder] {
          text-overflow: ellipsis;
        }
      }
    }
  }
}

input::-webkit-input-placeholder {
  color: darken($secondary, 75%);
}

@media (max-width: 768px) {
  .header {
    &__row {

      &--topnav {
        display: none;
      }

      &--theme {
        background-color: $primary;
        padding: 5px;
      }
    }

    &__cell {

      &--search {
        padding-left: 8px;
        width: 95%;
        height: 50px;
        margin: 3px 0px;
      }
    }
  }
}

.topnav-dropdown {
  background: $gray-100;
  width: 85px;
  border: none;
  transform: translate3d(48px, 35px, 0px) !important;
}

.topnav-dropdown-items {
  padding-left: 12px;
}

.topnav-nav-link {
  margin-top: 3px;
  color: $gray-800;
}