.cmp-tts {
  /* ------------------------------- input range ------------------------------ */
  /* ------------------------------ test for CUI ------------------------------ */
  /* WAC positioning */
  /* GEH positioning */
  /* vertical playpanel */
}

.cmp-tts div[data-app="ttsreader"] .controls,.cmp-tts div[data-app="ttsreader"] > #tts-read-aloud{
	opacity: 0.8;
}
.cmp-tts div[data-app="ttsreader"] #tts-read-aloud:hover, .cmp-tts div[data-app="ttsreader"] #tts-read-aloud:hover > #tts-read-aloud, .cmp-tts div[data-app="ttsreader"] #tts-read-aloud:hover {
	opacity: 1;
}
.cmp-tts div[data-app="ttsreader"] .ttscontrol {
	display: inline-block;
}
.cmp-tts div[data-app="ttsreader"] input.ttscontrol[type="range"] {
	width: 100%;
}
.cmp-tts div[data-app="ttsreader"] {
	padding: 4px;
	position: fixed;
	bottom: 50px;
	top: auto;
	left: auto;
	right: auto;
	font-size: 14px;
	z-index: 200;
	margin-left: auto;
	text-align: center;
	width: 100%;
	display: grid;
	grid-template-columns: max-content max-content max-content;
	align-items: end;
	justify-content: center;
	column-gap: 8px;
}
.cmp-tts div[data-app="ttsreader"] .btn.btn--primary {
	border: 1px solid transparent;
	background: #017cad;
	color: #fff;
	text-decoration: none;
	height: 40px;
	max-width: 300px;
	text-align: center;
	vertical-align: middle;
	font-weight: 400;
	min-width: 0;
	font-size: 16px;
	outline: none;
	cursor: pointer;
	display: inline-block;
	border-radius: 2rem;
	padding: 0 5px;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel {
	background-color: #ffffff;
	border: 2px solid #007cac;
	padding: 16px;
	color: #212529;
	width: 264px;
	margin-top: 2px;
}
@media screen and (max-width: 600px) {
	.cmp-tts div[data-app="ttsreader"] {
		right: 0;
	}
}
.cmp-tts div[data-app="ttsreader"] div.controls {	
	border-radius:19px;
}
.cmp-tts div[data-app="ttsreader"] div.controls.mainbuttons{
	visibility: visible !important;
	opacity: 1;
	margin-top: -40px;
	width: 300px;
}
.cmp-tts div[data-app="ttsreader"] [data-type="playpanel"] div.controls {
	transform: unset !important;
}
.cmp-tts div[data-app="ttsreader"] div.controls button {
	text-align: center;
	cursor: pointer;
}
.cmp-tts div[data-app="ttsreader"] button.pulsating {
	-moz-animation-name: flash;
	-o-animation-name: flash;
	-webkit-animation-name: flash;
	animation-name: flash;
	-o-animation-duration: 2s;
	-moz-animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-o-animation-fill-mode: both;
	-moz-animation-fill-mode: both;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-o-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
@-o-keyframes flash {
	0%,
	50%,
	100% {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0;
	}
}
@-moz-keyframes flash {
	0%,
	50%,
	100% {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0;
	}
}
@-webkit-keyframes flash {
	0%,
	50%,
	100% {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0;
	}
}
@keyframes flash {
	0%,
	50%,
	100% {
		opacity: 1;
	}
	25%,
	75% {
		opacity: 0;
	}
}
.cmp-tts div[data-app="ttsreader"] button[data-action="close"],
.cmp-tts div[data-app="ttsreader"] .controls button[data-action="close"] {
	background-color: #cecece;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	text-align: center;
	float: right;
	padding: 0;
	margin: 0;
	line-height: 0;
	border: 1px solid #1e4471;
}
.cmp-tts div[data-app="ttsreader"] .controls-row {
	display: table;
	width: 85%;
	margin-bottom: 8px;
}
.cmp-tts div[data-app="ttsreader"] .controls-row label,
.cmp-tts div[data-app="ttsreader"] .controls-row input:not([type="range"]),
.cmp-tts div[data-app="ttsreader"] .controls-row div {
	display: table-cell;
	vertical-align: middle;
}
.cmp-tts div[data-app="ttsreader"] .horizontal {
	font-size: 14px;
	transform: translateX(0px) translateY(40px);
	transition: all 1s ease-in-out;
	width: 300px;
	height: 40px;
}
.cmp-tts div[data-app="ttsreader"] form select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #dee2e6;
	height: 40px;
	font-size: 14px;
	color: #58585b;
	outline: none;
	padding: 0 30px 0 8px;
	border-radius: var(--radius);
	background-color: var(--baseBg);
	background-image: url('images/dd-closed.png');
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: center;
	width: 98%;
}
.cmp-tts div[data-app="ttsreader"] form select::after {
	display: inline-block;
	width: 20px;
	height: 40px;
	background-color: pink;
	content: ' ';
}
.cmp-tts div[data-app="ttsreader"] form select:hover {
	border-color: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] form select:active {
	border-color: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] form select option {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding-top: 4px;
	padding-bottom: 4px;
}
.cmp-tts div[data-app="ttsreader"] form .selgroup {
	position: relative;
	margin-bottom: 8px;
}
.cmp-tts div[data-app="ttsreader"] .controls button:not([data-action="close"]) {
	font-size: 14px;
	padding: 4px;
	border: none;
}
.cmp-tts div[data-app="ttsreader"] .controls button[data-action="close"] {
	background-color: #eff8fc;
	font-size: 14px;
	padding: 4px;
	border: 1px  solid #1e4471;
	border-left: none;
}
.cmp-tts div[data-app="ttsreader"] .controls button:not([data-action="close"]) {
	background-color: transparent;
}
.cmp-tts div.controls button:not([data-action="close"]) {
	width: 50px;
	height: 40px;
	background-repeat: no-repeat;
	background-position-x: center;
	background-position-y: center;
	background-size: contain;
	color: white;
}
.cmp-tts div.controls button span {
	display: none;
}
.cmp-tts div[data-app="ttsreader"] button {
	--button-bg-size: 150px 240px;
	--button-bg-size-vertical: 240px 150px;
	--button-bg-size-mobile: 90px 144px;
}
.cmp-tts button#tts-prev {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: 0px;
}
.cmp-tts button#tts-prev:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: 0px;
}
.cmp-tts button#tts-prev.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: 0px;
}
.cmp-tts button#tts-play {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: -120px;
}
.cmp-tts button#tts-play:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: -120px;
}
.cmp-tts button#tts-play.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: -120px;
}
.cmp-tts button#tts-next {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: -40px;
}
.cmp-tts button#tts-next:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: -40px;
}
.cmp-tts button#tts-next.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: -40px;
}
.cmp-tts button#tts-pause {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: -80px;
}
.cmp-tts button#tts-pause:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: -80px;
}
.cmp-tts button#tts-pause.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: -80px;
}
.cmp-tts button#tts-cancel {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: -200px;
}
.cmp-tts button#tts-cancel:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: -200px;
}
.cmp-tts button#tts-cancel.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: -200px;
}
.cmp-tts button#tts-settings {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -50px;
	background-position-y: -160px;
}
.cmp-tts button#tts-settings:hover {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: -100px;
	background-position-y: -160px;
}
.cmp-tts button#tts-settings.active {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
	background-size: var(--button-bg-size);
	background-position-x: 0px;
	background-position-y: -160px;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls {
	padding-left: 8px;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button {
	background-color: #ffffff;
	color: #017CAD;
	font-size: 14px;
	padding: 4px 20px;
	border: 1px solid #017CAD;
	border-left: none;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button:focus,
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button:hover,
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button.active {
	color: #ffffff;
	background-color: #017CAD;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button#tts-cancel {
	border-top-left-radius: 14px;
	border-bottom-left-radius: 14px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	background-image: none;
	width: auto;
	height: 32px;
	border-left: 1px solid #017CAD;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls button#tts-save {
	background-image: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-top-right-radius: 14px;
	border-bottom-right-radius: 14px;
	width: auto;
	height: 32px;
}
.cmp-tts div[data-app="ttsreader"] .controls-row div.cell1 {
	width: 20%;
}
.cmp-tts div[data-app="ttsreader"] .controls-row div.cell2 {
	width: 65%;
}
.cmp-tts div[data-app="ttsreader"] .controls-row div.cell3 {
	padding-left: 4px;
	width: 15%;
}
.cmp-tts div[data-app="ttsreader"] input[type=range] {
	-webkit-appearance: none;
	width: 100%;
	margin: 0px 0;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]:focus {
	-webkit-appearance: none;
	outline: none;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	width: 100%;
	height: 8px;
	cursor: e-resize;
	background: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	height: 12px;
	width: 8px;
	border-radius: 12px;
	border: 1px solid #00bceb;
	margin-top: -2px;
	background: white;
	cursor: e-resize;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]:focus::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-moz-range-track {
	width: 100%;
	height: 8px;
	cursor: e-resize;
	background: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-moz-range-thumb {
	height: 12px;
	width: 12px;
	border-radius: 12px;
	border: 1px solid #00bceb;
	margin-bottom: 8px;
	background: #00bceb;
	cursor: e-resize;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-ms-track {
	width: 100%;
	height: 8px;
	cursor: e-resize;
	background: transparent;
	border-color: transparent;
	color: transparent;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-ms-fill-lower {
	background: #00bceb;
	border-radius: 0px;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-ms-fill-upper {
	background: #00bceb;
	border-radius: 0px;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]::-ms-thumb {
	height: 12px;
	width: 12px;
	border-radius: 12px;
	border: 1px solid #00bceb;
	margin-bottom: 8px;
	background: #00bceb;
	cursor: e-resize;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]:focus::-ms-fill-lower {
	background: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] input[type=range]:focus::-ms-fill-upper {
	background: #00bceb;
}
.cmp-tts div[data-app="ttsreader"] .controls-row label.tts-labelch {
	display: inline;
}
.cmp-tts span[class*='icon-'] {
	position: relative;
	display: inline-block;
	font-size: inherit;
	font-style: normal;
	font-weight: normal;
	speak: none;
	text-decoration: inherit;
	text-transform: none;
	text-rendering: optimizeLegibility;
	vertical-align: middle;
	text-indent: 0.5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.cmp-tts span.icon-help-alt:before {
	content: none;
	/*"";*/
}
.cmp-tts span.icon-size-16 {
	float: right;
	font-size: 16px;
	cursor: pointer;
	background-image: url('images/help.png');
	background-repeat: no-repeat;
	background-size: contain;
	width: 16px;
	height: 16px;
}
.cmp-tts div[data-app="ttsreader"] label.voice {
	width: 100%;
	display: inline-block;
	padding-bottom: 4px;
}
.cmp-tts div[data-app="ttsreader"] div.tooltip {
	background: #1d1d1d;
	color: #fff;
	padding: 7px;
	border-radius: 5px;
	position: absolute;
	min-width: 50px;
	max-width: 300px;
	display: none;
	z-index: 1000;
	font-size: 14px;
	text-align: left;
}
.cmp-tts .ttshid {
	visibility: hidden !important;
	transform: translateX(500px) translateY(40px) !important;
	transition: all 1s ease-in-out !important;
}
.tts-vertical-inner{
	width: 300px;
	height: 40px;
	overflow: hidden;	
	grid-column: 1;
	grid-row: 2;
	margin-left: -300px;	
}

.cmp-tts div[data-app="ttsreader"] sup {
	vertical-align: super;
	font-size: 12px;
}
.cmp-tts button#tts-read-aloud {
	font-family: Arial, sans-serif;
	line-height: 38px;
	white-space: break-spaces;
	width:160px;
}
.cmp-tts body[data-html="/c/r/weare"] div[data-app="ttsreader"] {
	top: 340px;
}
.single-post button#tts-close {
    font-size: 14px;
}
.single-post #rate, .single-post #pitch {
	border:0;
}
.single-post #tts-save{
	border-left:1px solid #017CAD;
	margin-left: -5px;
}
.single-post .tts-close-button {
	cursor: pointer;
}
button#tts-read-aloud {
	grid-column: 2;
	grid-row: 2;
}
button#social-share:focus, button#tts-read-aloud:focus,#share_bar_desktop .share:focus{
    outline: 1px solid black;
	outline-style: solid;
}
#share_bar_desktop .share:focus:not(:focus-visible) {
  outline: none;
}
#tts-prev:focus,button#tts-play:focus,button#tts-next:focus,button#tts-pause:focus,button#tts-cancel:focus,button#tts-settings:focus{
	border:1px solid black;
	flex:1;
}
button#social-share:focus:not(:focus-visible), button#tts-read-aloud:focus:not(:focus-visible), button#share_bar_desktop .share:focus:not(:focus-visible){
	outline: none;
}
#tts-prev:focus:not(:focus-visible),button#tts-play:focus:not(:focus-visible),button#tts-next:focus:not(:focus-visible),button#tts-pause:focus:not(:focus-visible),button#tts-cancel:focus:not(:focus-visible),button#tts-settings:focus:not(:focus-visible){
	border:none;
}

@media (max-width: 1253px) {
  .cmp-tts body[data-html="/c/r/weare"] div[data-app="ttsreader"] {
    top: 340px;
    left: 0;
  }
}
@media (max-width: 768px) {
  .cmp-tts body[data-html="/c/r/weare"] div[data-app="ttsreader"] {
	left: auto;
	top: 76px;
	right: 0;
  }
  .cmp-tts div[data-app="ttsreader"] {    
		height: auto;
	}
}
.cmp-tts div[data-app="ttsreader"] {
	line-height: 0;
	padding: 0;
	with:100%;
}
.cmp-tts div[data-app="ttsreader"] .tts-panel {
	line-height: 14px;
}
.cmp-tts div[data-app="ttsreader"] {
	padding:4px;
	position: fixed;
	bottom: 50px;
	top: auto;
	left: auto;
	right: auto;
	font-size: 14px;
	z-index: 200;
	margin-left: auto;
	text-align: center;
	width: 100%;
	height:50px;
}
.cmp-tts div[data-app="ttsreader"] .btn.btn--primary.social_share_button {
	border:1px solid transparent;
	background:#fff;
	color: #0d274d;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
	padding:0 25px
}
.cmp-tts div[data-app="ttsreader"] .btn.btn--primary {
	color:#fff;
	background: #0d274d;
	padding:0 20px;
	width:auto;
}
.controls button {
	border-radius:0;
}
span.red-aloud-img{
	background-image:url('images/voice.svg');
	background-repeat:no-repeat;
	
}
@media (min-width: 769px) and (max-width: 950px) {
  .cmp-tts body[data-html="/c/r/weare"] div[data-app="ttsreader"] .tts-aloud {
		display: none;
  }
}
.cmp-tts body#wcq div[data-app="ttsreader"] {
	top: 218px;
}
@media (max-width: 1300px) {
  .cmp-tts body#wcq div[data-app="ttsreader"] {
		left: 14px;
  }
}
@media (max-width: 929px) {
	.cmp-tts div[data-app="ttsreader"]{
		margin-left:0;
		right:auto;
	}
}
@media (max-width: 768px) {
	.cmp-tts body#wcq div[data-app="ttsreader"] {
		left: auto;
		top: 150px;
		right: 0;
	}
}
@media (max-width: 600px) {
	.cmp-tts body#wcq div[data-app="ttsreader"] {
		left: auto;
		top: 210px;
		right: 0;
	}
}
/*@media (max-width: 430px) {
	.cmp-tts [data-type="playpanel"] div.controls button:not([data-action="close"]) {
		background-size: var(--button-bg-size-mobile) !important;
		background-repeat: no-repeat;
		width: 30px;
		height: 24px;
	}
	.cmp-tts button#tts-prev {
		background-position-x: -30px;
		background-position-y: 0px;
	}
	.cmp-tts button#tts-prev:hover {
		background-position-x: -60px;
		background-position-y: 0px;
	}
	.cmp-tts button#tts-prev.active {
		background-position-x: 0px;
		background-position-y: 0px;
	}
	.cmp-tts button#tts-play {
		background-position-x: -30px;
		background-position-y: -72px;
	}
	.cmp-tts button#tts-play:hover {
		background-position-x: -60px;
		background-position-y: -72px;
	}
	.cmp-tts button#tts-play.active {
		background-position-x: 0px;
		background-position-y: -72px;
	}
	.cmp-tts button#tts-next {
		background-position-x: -30px;
		background-position-y: -24px;
	}
	.cmp-tts button#tts-next:hover {
		background-position-x: -60px;
		background-position-y: -24px;
	}
	.cmp-tts button#tts-next.active {
		background-position-x: 0px;
		background-position-y: -24px;
	}
	.cmp-tts button#tts-pause {
		background-position-x: -30px;
		background-position-y: -48px;
	}
	.cmp-tts button#tts-pause:hover {
		background-position-x: -60px;
		background-position-y: -48px;
	}
	.cmp-tts button#tts-pause.active {
		background-position-x: 0px;
		background-position-y: -48px;
	}
	.cmp-tts button#tts-cancel {
		background-position-x: -30px;
		background-position-y: -120px;
	}
	.cmp-tts button#tts-cancel:hover {
		background-position-x: -60px;
		background-position-y: -120px;
	}
	.cmp-tts button#tts-cancel.active {
		background-position-x: 0px;
		background-position-y: -120px;
	}
	.cmp-tts button#tts-settings {
		background-position-x: -30px;
		background-position-y: -96px;
	}
	.cmp-tts button#tts-settings:hover {
		background-position-x: -60px;
		background-position-y: -96px;
	}
	.cmp-tts button#tts-settings.active {
		background-position-x: 0px;
		background-position-y: -96px;
	}
	.cmp-tts div[data-app="ttsreader"] .tts-panel {
		width: 90%;
		padding: 4px;
		margin: 0;
		left: 5% !important;
		text-align: center;
	}
	.cmp-tts button#tts-read-aloud {
		font-size: 14px;
		line-height: 30px;
		height: 40px;
		padding: 0 16px;
	}
	.tts_voice_image {
		padding: 5px 5px !important;
	}
	.cmp-tts div[data-app="ttsreader"] div.controls.mainbuttons {
		width: auto;
	}
	.cmp-tts div[data-app="ttsreader"] div.controls.mainbuttons {
		margin-left: calc(50% - 90px) !important;
	}
}*/
@media (min-width: 768px) and (max-width: 1253px) {
	.cmp-tts body[data-html="/c/r/weare"] div[data-app="ttsreader"].vertical {
		left: 8px;
	}
}
.cmp-tts [data-type="playpanel"].vertical {
	width: 40px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button:not([data-action="close"]) {
	background-image: url('images/sprite-vertical.png') !important;
	background-size: var(--button-bg-size-vertical) !important;
	background-repeat: no-repeat;
	width: 40px;
	height: 50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-prev {
	background-position-x: -200px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-prev:hover {
	background-position-x: -200px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-prev.active {
	background-position-x: -200px;
	background-position-y: 0px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-play {
	background-position-x: -80px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-play:hover {
	background-position-x: -80px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-play.active {
	background-position-x: -80px;
	background-position-y: 0px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-next {
	background-position-x: -160px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-next:hover {
	background-position-x: -160px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-next.active {
	background-position-x: -160px;
	background-position-y: 0px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-pause {
	background-position-x: -120px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-pause:hover {
	background-position-x: -120px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-pause.active {
	background-position-x: -120px;
	background-position-y: 0px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-cancel {
	background-position-x: 0px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-cancel:hover {
	background-position-x: 0px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-cancel.active {
	background-position-x: 0px;
	background-position-y: 0px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-settings {
	background-position-x: -40px;
	background-position-y: -50px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-settings:hover {
	background-position-x: -40px;
	background-position-y: -100px;
}
.cmp-tts [data-type="playpanel"].vertical div.controls button#tts-settings.active {
	background-position-x: -40px;
	background-position-y: 0px;
}

.cmp-tts div[data-app="ttsreader"].tts-vertical .tts-panel {
	position: absolute;
	left: 40px;
	bottom: 0;
	z-index:9;
}

.tts-reading {
	background-color: #ffffa0 !important;
}

span.tts-close-button {
	display: none;
}
.tts-vertical:nth-child(2){
	display:none !important;
}
.tts-vertical:hover #tts-read-aloud{
	opacity:unset;
}
.social-media-division.hide_social_media{
	margin-bottom: 10px;
	visibility: hidden;
	transform: translateY(235px);
	transition: all 1s linear;
}
.social-media-division{	
	transform: translateY(0);
	transition: all 1s linear;
	height: 224px;
	visibility: visible;
}	
#share_bar_desktop {
	display: inline-table !important;
	position: relative !important;
	top: unset !important;
	right: unset;
	text-align:left !important;	
	left: unset !important;
	width: 165px;
	background:#fff !important;    
	box-shadow: 0px 4px 24px 0px #00000014; 
	border:unset !important;
	padding: 8px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;		
}
#share_bar_desktop .share_image {
	vertical-align: middle;
	color:#F4F5F7;
	width:36px !important;
	height:36px !important;
	border-radius:24px;
}
#share_bar_desktop .social-media-text {
	vertical-align: middle;
	font-size:14px;
	line-height:140%;
	color:#1B1C1D;
	margin-left:7px;
}
#share_bar_desktop .box {
	height:36px;
	width:130px;	  
}
.twitter,.facebook,.linkedin,.mail{
	padding:8px 20px 8px 0;
}
#share_bar_desktop .share{
	text-decoration:none;
}
.tts_voice_image{
	padding:10px 5px 10px 0;
	float:left;
	display: inline-table;
}
.tts_share_image{
	padding:10px 5px 10px 0;
	vertical-align:middle;
	display: inline-table;
}
.cmp-tts div[data-app="ttsreader"] div.controls.savereset {
	margin-top: 0;  
	display: contents;	  
}
#social-share {
	opacity: 0.8;
	grid-column: 3;
	grid-row: 2;
	width: 125px;
	background:#F4F5F7;
}
#social-share:hover{
	opacity: 1;
}
.social-media-parent {
	overflow: hidden;
	grid-column: 3;
	grid-row: 1;
	margin-bottom: 4px;
	visibility: hidden;
}
.social-media-parent .social-media-division{		
	border: 1px solid #d4d4d40f;
}
.cmp-tts div[data-app="ttsreader"] .tts-close-button {
    opacity: 1;
}

@media (max-width: 308px) {
	.cmp-tts [data-type="playpanel"].vertical div.controls button:not([data-action="close"]) {
		width: 40px;
		height: 50px;
	}
}

@media screen and (max-width: 720px){
	span.tts-close-button{
		position: absolute;
		left: 40px;
		border: 1px solid #007cac;
		display: flex;
		width: 16px;
		height: 16px;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: #007cac;
		top: -8px;
		padding: 8px;
		color: white;
	}  
}

@media only screen and (max-width: 930px) {
	/*#social-share{display:none;}*/
	.tts_voice_image {
		padding:10px 5px;
		vertical-align: top;
	}
	.cmp-tts div[data-app="ttsreader"] div.controls {
		margin-top: 5px;    
		margin-left: calc(50% - 150px) !important;
		text-align: center !important;
		float: left;
		display: unset;
		position: relative;
	}
	.cmp-tts div[data-app="ttsreader"] .tts-panel[data-type="setpanel"] .controls.savereset {
		padding-left: 8px;
		display: contents;
	}
}
@media only screen and (min-width: 1600px) {
	#share_bar_desktop {
		margin-left: unset !important;;
	}
}
@media only screen and (min-width: 1281px) {
	.cmp-tts div[data-app="ttsreader"] {
	  max-width:1600px;
	}
}

@media only screen and (max-width: 329px) {
	#share_bar_desktop {
		display: none;
	}  
}
@media only screen and (max-width: 930px) {
	.cmp-tts div[data-app="ttsreader"] {
		display: grid;
		grid-template-rows: auto auto;
		grid-template-columns: auto auto;
	}
	button#tts-read-aloud {
		grid-row: 2; 
		grid-column: 1;
	}

	button#social-share {
		grid-row: 2;
		grid-column: 2;
	}
	.tts-vertical-inner {
		grid-row: 1; 
		grid-column: 1 / span 2;
		margin-left: 0;
		margin-bottom:10px;
	}
	.social-media-parent {
		grid-row: 2;
		grid-column: 2; 
		overflow: hidden; 
		margin-bottom: 4px; 
		position: relative;
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
		visibility: hidden;		
	}
	.social-media-parent .social-media-division{
		z-index:9;
	}
	.social-media-parent .social-media-division.hide_social_media{
		z-index:0;
	}	
	.tts-vertical{
		margin-bottom: 50px;
	}	
}