@import "../style/default";

$background_color_2: #fff;
$border_color_2: #D0D0CE;

.ogn {
  .unauth-header {
    .search {
      .form-group {
        //width: 564px;
        @media (min-width: 768px) and (max-width: 899px) {
          //width: 185px;
        }

        @media (min-width: 900px) and (max-width: 999px) {
          //width: 320px;
        }

        @media (min-width: 1000px) and (max-width: 1200px) {
          //width: 420px;
        }
      }
    }
  }
  .search.uhc {
    .search-field {
      color: #31b7be;
    }
  }
  .search {
    .oui-a11y-hidden {
      clip: rect(1px, 1px, 1px, 1px);
      height: 1px;
      overflow: hidden;
      position: absolute !important;
      width: 1px;
    }

    .search-box {
      margin-top: -7px;
      position: relative;
      float: right;
      right: 0;
      display: block;
      @media (max-width: $mediumbreak) {
        //background-color: #434448;
        //margin: 0;
        //padding: 15px 20px;
        //float: none;
      }
    }

    .form-group {
      margin-bottom: 0;
      margin-right: 0px; //5
      position: relative; //absolute;
      //right: 0;
      //width: 405px;
      @media (max-width: $mediumbreak) {
        margin-right: 0;
        position: relative;
        //width: auto;
      }

      @media (min-width: 768px) and (max-width: 949px) {
        //width: auto;
      }

      @media (min-width: 950px) and (max-width: 1023px) {
        //width: 195px;
      }

      @media (min-width: 1024px) and (max-width: 1200px) {
        //width: 270px;
      }
    }

    .search-field {
      border: solid 1px #D0D0CE;
      border-radius: 0px;
      color: $primarycolor;
      font-size: 16px;
      font-weight: bold;
      padding: 3px 45px 3px 10px;
      min-width: 110px;
      height: 35px;
      width: 110px;
      position: relative;
    //  .transition(width 0.4s ease-in-out);
      @media (max-width: $mediumbreak) {
      //  width: 100%;
      }

      &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        color: $primarycolor;
        opacity: 0.6;
      }

      &::-moz-placeholder { /* Firefox 19+ */
        color: $primarycolor;
        opacity: 0.6;
      }

      &:-ms-input-placeholder { /* IE 10+ */
        color: $primarycolor;
      }

      &:-moz-placeholder { /* Firefox 18- */
        color: $primarycolor;
        opacity: 0.6;
      }

      &:focus {
        width: 100%;
        outline: 3px solid $outlinecolor;
        border-radius: 0;
      }

      &:hover, &:focus {
        border-color: $hoverfocuscolor;
      }
    }

    .ng-valid.ng-dirty {
      border-color: #D0D0CE;

      &:focus {
        border-color: $hoverfocuscolor;
      }
    }

    .search-button {
      background-image: url("/assets/search/search_icon_blue.png");
      background-position: center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
      background-color: #fff;
      border: none;
      border-left: 1px solid #d0d0ce;
      border-radius: 0;
      position: absolute;
      right: 1px;
      top: 1px;
      height: 33px;
      width: 33px;

      &:hover, &:focus {
        background-color: $hoverfocuscolor;
        background-image: url("/assets/search/search_icon_white.png");
        background-position: center;
      }

      &:focus {
        outline: 3px solid $outlinecolor;
        border-radius: 0;
      }
    }
  }
}