.words_item {
	display: inline-block;
    width: 25px;
    height: 25px;
	line-height: 23px;
    text-align: center;
    color: #2a2a2a;
    font-size: 13px;
    font-weight: 600;
    border-radius: 50%;
    vertical-align: top;
	cursor: pointer;
}
.words_item.active {
	background-color: #17a2b8!important;
	color: #fff!important;
}
.words_item:hover {
	background-color: #17a4b8;
	color: #fff;
}

.words_parent {
    position: absolute;
	box-shadow: 0 1px 0 0 #17a2b854, 0 0 0 1px #17a2b854;
    border-radius: 0.25rem;
	position: -webkit-sticky;
    position: sticky;
    background: #2f2e29;
    width: 100%;
    top: 52px!important;
	
    z-index: 99;
    top: 60px;
	left: 0;
	right: 0;
}

@media(max-width: 767px){
	.words_item:hover {
		background-color: unset;
		color: #2a2a2a;
	}
	.words_item {
		width: 19px;
		height: 19px;
		font-size: 10px;
		line-height: 20px;
	}
}

@media(max-width: 767px) and (orientation: portrait){
	.words_parent {
		display: flex;
		position: fixed;
		right: 0;
		left: unset;
		width: 48px;
		top: 46px;
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
		bottom: 0;
	}
}

@media(max-width: 767px) and (orientation: landscape){
	.words_parent {
		position: fixed;
		right: 0;
		left: 0;
		width: 100%;
		top: 46px;
		box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
		text-align: center;
	}
}