@import '~@ripedata/components/src/common';

.appnav {
  &-base{
    border-bottom: 5px solid $color-lt-gray;
  }

  &-brand {
    height: 50px;
    padding-left: 0px;
    align-self: center;
  }


  &-title {
    margin-left: 40px;
    padding-left:  20px;
    font-family: 'Dosis', sans-serif;
    font-size: 24px;
    font-weight: 500;
    color: #6D6E70;
    border-left: 2px solid #F05A28;
  }

  &-section-container {
    display: flex;
    flex-flow: column;
    align-content: center;
    justify-content: center;
  }

  &-system {
    &-container {
      background-color: #f05a28;
      height: 100%;
      padding-right: 25px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
    }

    &-row {
      padding-top: 10px;
      padding-right: 25px;
      display: flex;
      flex-direction: row;
      align-items: center;
    }

    &-item {
      padding-left: 25px;

      &-selectable {
        cursor: pointer;
      }

    }
  }

  &-search {
    position: relative;
    padding-top: 5px;
    padding-bottom: 10px;
    padding-left: 25px;
    margin-right: auto;
    margin-left: auto;

    // &-symbol {
    //   position: absolute;
    //   width: 15px;
    //   height: 15px;
    //   position: absolute;
    //   top: 6px;
    //   left: 35px;
    // }

    &-input {

      width: 160px;
      height: 26px;
      // color: #fefefe;
      //
      // background: #CC4013;
      // /* border: 1px solid #aaa; */
      // border-radius: 15px;
      // border: none;
      // /* box-shadow: 0 0 0px #ebebeb, 0 0px 0px #ebebeb ; */
      //
      // text-indent: 32px;
    }
  }
}

.appnav-search-input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #fefefe;
    opacity: 1; /* Firefox */
}

.appnav-search-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #fefefe;
}

.appnav-search-input::-ms-input-placeholder { /* Microsoft Edge */
    color: #fefefe;
}