/*
 * Virtual assistant styles
 */

/* Container and base styles */

.ethelp {
  font-family: Arial,sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #685664;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
.ethelp * {
  box-sizing: border-box;
}
.ethelp h2 {
  padding: 0;
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
}
.ethelp .button {
  display: inline-block;
  position: relative;
  padding: 6px 12px;
  border: 0 none;
  border-radius: 6px;
  margin: 0;
  background: #676d70 none repeat scroll 0 0;
  color: #fff;
  font-family: PlusnetCreighton, Arial,sans-serif;
  font-size: 20px;
  font-weight: bold;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  transition: background 0.6s ease 0s;
  cursor: pointer;
  -moz-user-select: none;
}
.ethelp .button:hover {
  background: #424648;
  color: white;
  transition: background 0.2s ease;
}
.ethelp .visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  border: 0;
}

/* Tabs */

.ethelp .js-tabs__content {
  display: none;
}
.ethelp .js-tabs__content.is-open {
  display: block;
}
.ethelp .search-tabs {
  display: block;
  padding: 0;
  margin: 0;
  list-style-type: none;
  overflow: hidden;
}
.ethelp .search-tabs__item {
  width: 49.5%;
  padding: 0;
  margin: 0;
  background-color: #676d70;
}
#content .ethelp .search-tabs__item a {
  display: block;
  position: relative;
  padding: 18px 10px 18px 50px;
  color: white;
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  outline: none;
}
.ethelp .search-tabs__item a:before {
  content: '';
  display: block;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 15px;
  background-repeat: no-repeat;
}
#content .ethelp .search-tabs__item a:hover {
  color: white;
}
.ethelp .search-tabs__item.tabs__item--active {
  background-color: #edf3f5;
}
#content .ethelp .search-tabs__item.tabs__item--active a {
  color: #676d70;
}
.ethelp .search-tabs__item--community.tabs__item--active a:before {
  background-position: left top;
}
.ethelp .search-tabs__item--help {
  float: left;
}
#content .ethelp .search-tabs__item--help a {
  padding-left: 54px;
}
.ethelp .search-tabs__item--help a:before {
  content: '?';
  width: 30px;
  height: 30px;
  padding-left: 11px;
  border-radius: 15px;
  margin-top: -15px;
  background-color: white;
  color: #676d70;
  font-family: PlusnetCreighton, Arial, sans-serif;
  font-size: 26px;
  font-weight: bold;
  line-height: 31px;
}
.ethelp .search-tabs__item--help.tabs__item--active a:before {
  background-color: #38bcde;
  color: white;
}
.ethelp .search-tabs__item--community {
  float: right;
}
#content .ethelp .search-tabs__item--community a {
  padding-left: 58px;
}
.ethelp .search-tabs__item--community a:before {
  width: 35px;
  height: 29px;
  margin-top: -14px;
  background-image: url("/images/icons/search-icons-sprite.png");
  background-position: right top;
  background-size: cover;
}

/* Loader */

.ethelp .etloader {
  height: 136px;
  position: relative;
  overflow: hidden;
}
.ethelp .etloader:before {
  content: '';
  display: block;
  height: 50px;
  width: 50px;
  margin: 24px auto 6px auto;
  animation: etloader-rotation .6s infinite linear;
  border-left: 6px solid #0397B5;
  border-right: 6px solid #0397B5;
  border-bottom: 6px solid #0397B5;
  border-top: 6px solid #38BCDE;
  border-radius: 100%;
}
.ethelp .etloader:after {
  display: block;
  text-align: center;
  content: 'Loading...';
  margin-right: -0.4em;
}

@keyframes etloader-rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

/* Search bar */

.ethelp .search__input-container {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

  -webkit-box-pack: justify;              /* OLD - Safari */
  -webkit-justify-content: space-between; /* OLD - Webkit/Edge */
  -ms-flex-pack: justify;                 /* OLD - IE10 */
  justify-content: space-between;         /* NEW - Vanilla :) */

  padding-right: 12px;
}
.ethelp .search__input-container input {
  width: 100%;
  padding: 8px 12px;
  border: 2px solid #cfd8dc;
  transition: border-color 0.2s ease;
  color: #676d70;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 15px;
}
.ethelp .search__input-container input::-webkit-input-placeholder {
  color: #858d8d;
}
.ethelp .search__input-container input::-moz-placeholder {
  color: #858d8d;
}
.ethelp .search__input-container input:-moz-placeholder {
  color: #858d8d;
}
.ethelp .search__input-container input:-ms-input-placeholder {
  color: #858d8d;
}
.ethelp .search__input-container input:focus {
  outline: none;
  border: 2px solid #38bcde;
  transition: border-color 0.2s ease;
}
.ethelp .search__button {
  float: right;
}
.ethelp .etcharcount {
  padding: 6px 0;
  font-size: 13px;
  font-style: italic;
}

/* Search results - containers */

.ethelp .etoutput {
  display: none;
  position: relative;
  background: grey;
  background: #edf3f5;
  padding: 24px 26px;
  margin: 0 0 18px 0;
  overflow: hidden;
}
.ethelp p {
  padding: 0;
  margin: 14px 0;
  font-size: 14px;
  line-height: 1.5;
}

.ethelp .etoutput--has-community .results-wrap--community-empty.is-open {
  display: block !important;
}

/* Search results - headings */

.ethelp .etquestionrepeatbox {
  font-size: 17px;
  padding: 0;
  margin: 0 0 15px 0;
  font-weight: bold;
}
.ethelp .etquestionrepeatbox cite {
  font-weight: normal;
}
.ethelp .etquestionrepeatbox cite:before, .ethelp .etquestionrepeatbox cite:after {
  content: '"';
  display: inline;
}
.ethelp .results__heading {
  position: relative;
}
.ethelp .etoutput--col-2 .results__heading--help:before {
  display: none;
}
.ethelp .results__heading--community {
  display: none;
}

/* Search results - feedback */

.ethelp .etfeedbackbox {
  overflow: hidden;
  padding: 12px 0;
}
.ethelp .etfeedbacktitle {
  font-style: italic;
}
.ethelp .etoption {
  padding: 0 6px 0 0;
  margin: 0;
}
.ethelp .etfeedbacktextcontainer span {
  font-style: italic;
}
.ethelp .etfeedbacktext {
  padding: 10px;
  margin: 12px 0;
  width: 100%;
  color: #685664;
}
.ethelp .etoptioninput {
  margin-left: 1px;
}

/* Search results - community results list */

.ethelp .results__list {
  border-top: 1px dotted #bdc1c1;
  padding: 0;
  margin: 20px 0 0;
  list-style-type: none;
}
.ethelp .results__item {
  position: relative;
  border-bottom: 1px dotted #bdc1c1;
  padding: 14px 0;
  margin: 0;
}
.ethelp .results__item a {
  display: inline-block;
  position: relative;
  padding: 0 14px 0 40px;
  text-decoration: none;
}
.ethelp .results__item a:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  width: 25px;
  height: 20px;
  background-image: url("/images/icons/icon-comments.png");
  background-repeat: no-repeat;
  background-size: 25px;
}
.ethelp .results__item__fixed-alert {
  display: block;
  position: absolute;
  top: -1px;
  right: 0;
  text-align: right;
}
.ethelp .results__item__fixed-alert:before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 40px solid #70b989;
  border-left: 40px solid transparent;
}
.ethelp .results__item__fixed-alert:after {
  content: '';
  display: block;
  position: absolute;
  top: 8px;
  left: 21px;
  width: 13px;
  height: 10px;
  background-image: url("/images/icons/icon-tick.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.ethelp .results__item__fixed-alert span {
  position: relative;
  top: -5px;
  display: block;
  color: #70b989;
}
.ethelp .results__item--is-fixed {
  min-height: 70px;
  padding-right: 50px;
}

/*
  .tt- prefix denotes styles for the
  TypeAhead Search bar feature
  which is part of the virtual assistant
*/

.tt-input {
    position: relative;
}

.tt-menu {
    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 100;
    border: 2px solid #38bcde;
    background: white;
    margin-top: -2px;
    padding: 6px;
}

.tt-suggestion {
    padding: 3px 6px;
}
.tt-selectable:hover {
    background: #cfd8dc;
    cursor: pointer;
}
.tt-cursor,
.tt-cursor:hover {
    background: #38bcde;
    color: white;
}