@keyframes sprite {
	from { background-position: 0px; }
	to { background-position: -12000px; }
}

.text-glyph.search:before { content: ""; display: inline-block; width: 1em; height: 1em; }
.text-glyph.pin:before { content: ""; display: inline-block; width: 1em; height: 1em; }
#bit-bubble { position: relative; }
#bit-bubble:before { content: ""; left: -24px; top: calc(50% - 12px); border-width: 24px 0 0 24px; border-color: #171717 transparent; border-style: solid; position: absolute; }
#bit-pins span { font-size: 10px; }
#bit-search { position: relative; background: #fff; border-radius: 24px; padding-top: 12px; padding-bottom: 12px; }
#bit-search.show-suggestions { border-radius: 24px 24px 0 0; }
#bit-search-box { width: 100%; border: 0; line-height: 24px; }
#bit-search-results p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#bit-search-submit { right: 12px; top: 3px; padding: 12px; border: 0; line-height: 12px; background: none; position: absolute; }
#bit-search-spinner { right: 52px; top: calc(50% - 12px); width: 24px; height: 24px; border: 0; background: none; position: absolute; }

@media screen and (max-width: 859px) {
	#bit-bubble:before { left: calc(50% + 12px); top: -24px; border-color: transparent #171717; }
}

#bit-anim { display: block; width: 200px; height: 183px; background: url('bit-search-200x183-ss.png') no-repeat center left; }
#bit-anim.play { animation: sprite 5s steps(60) 1; }
#bit-search #bit-search-spinner { display: none; }
#bit-search.loading #bit-search-spinner { display: block; }
#bit-search.show-suggestions #bit-search-suggestions { display: block; }
#bit-search #bit-search-suggestions { position: absolute; left: 0; top: 100%; width: 100%; background: #fff; z-index: 1; display: none; border-radius: 0px 0px 24px 24px; text-align: left; padding-bottom: 12px; }
#bit-search #bit-search-suggestions .keyword-list { display: none; }
#bit-search #bit-search-suggestions .suggested-list { display: none; }
#bit-search #bit-search-suggestions .keyword-list { display: block; }
#bit-search #bit-search-suggestions h3 { margin-left: 16px; font-size: .6875rem; line-height: 16px; color: #444; font: 600 13px/16px 'Arial',Sans-Serif; cursor: default; text-transform: uppercase; font-weight: bold; }
#bit-search #bit-search-suggestions button { width: 100%; background: none; border: 0; text-align: left; }
#bit-search #bit-search-suggestions button span.text-glyph { color: #555555 }
#bit-search #bit-search-suggestions div.result button:hover { background: #ececec; }
.mslearnsearch form { background-color: transparent; font: normal 1rem "Segoe UI",Arial,Helvetica,Sans-Serif; padding-right: 10px; box-shadow: 0 2px 4px rgb(0 0 0 / 30%); align-items: center; justify-content: flex-end; display: inline-flex; border-radius: 24px; position: relative; background-color: #fff; margin-top: 2.5rem; width: 80%; }
.mslearnsearch { position: relative; display: flex; justify-content: space-evenly; }
.mslearnsearch form .input { background-color: transparent; padding: 12px 10px 12px 16px; border: 0; flex: 1; outline: none; -webkit-appearance: none; font-size: 1.125rem; font: inherit; }
.mslearnsearch form.focus { border-radius: 24px 24px 0 0; }
.mslearnsearch form .searchbutton { padding: 0; height: 0; width: 0; outline: none; border: none; position: absolute; }
.mslearnsearch form .searchlabel { position: relative; min-width: 28px; margin: auto 4px; height: 45%; width: 5%; cursor: pointer; }
.mslearnsearch-search { display: flex; justify-content: space-around; position: relative; margin-bottom: 65px; }
.mslearnsearch-character { width: 15%; display: flex; flex-direction: column; justify-content: flex-start; margin-top: 50px; }
.mslearnsearch-character img { width: 100%; transform: scaleX(-1); }
.mslearnsearch .speechbubble { width: 65%; background-color: #171717; color: #fff; padding: 1.5rem 0.5rem; position: relative; border-radius: 10px; }
.mslearnsearch .speechbubble:before { display: block; content: ''; margin: 0; padding: 0; position: absolute; left: 100%; border-style: solid; top: 100px; border-width: 40px 0 0 40px; border-color: transparent #171717; }
.mslearnsearch-content ul { list-style-type: none; }
.spinner_ajPY { transform-origin: center; animation: spinner_AtaB .75s infinite linear }
@keyframes spinner_AtaB {
	100% { transform: rotate(360deg) }
}
