.socialShareBox{
	cursor: pointer;
    text-align: center;
    float: left;
}

.socialShareBox > .socialSendBox{
	border: 1px solid #c3c3c3;
    padding: 2px;
    border-radius: 5px;
    background-color:  #FFFFFF;
}
.socialShareBox > .socialSendBox:hover{
	background-color:  #e6e6e6;
    /*color: #FFFFFF;*/
}

.socialShareBox > .socialClear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

/*default*/
.socialShareBox > .fa-facebook{
	color: #3b5998;
	padding: 5px;
}

.socialShareBox > .fa-facebook:hover{
	background-color: #3b5998;
	color: #FFFFFF;
}


.socialShareBox > .fa-twitter{
	color: #4099FF;
	padding: 5px;
}

.socialShareBox > .fa-twitter:hover{
	background-color: #4099FF;
	color: #FFFFFF;
}


.socialShareBox > .fa-google-plus{
	color: #dd4b39;
	padding: 5px;
}

.socialShareBox > .fa-google-plus:hover{
	background-color: #dd4b39;
	color: #FFFFFF;
}


.socialShareBox > .fa-linkedin{
	color: #0e76a8;
	padding: 5px;
}

.socialShareBox > .fa-linkedin:hover{
	background-color: #0e76a8;
	color: #FFFFFF;
}


.socialShareBox > .fa-whatsapp{
	color:#42b179;
}

.socialShareBox > .fa-whatsapp:hover{
	background-color: #42b179;
	color: #FFFFFF;
}


.socialShareBox > .fa-mobile{
	color:#f5935c;
}

.socialShareBox > .fa-mobile:hover{
	background-color: #f5935c;
	color: #FFFFFF;
}

.socialShareBox > .fa-envelope-o{
	color:#dd4b39;
}

.socialShareBox > .fa-envelope-o:hover{
	background-color: #dd4b39;
	color: #FFFFFF;
}

/*square*/
.socialShareBox > .fa-facebook-square{
	color: #3b5998;
}

.socialShareBox > .fa-facebook-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-twitter-square{
	color: #4099FF;
}

.socialShareBox > .fa-twitter-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-google-plus-square{
	color: #dd4b39;
}

.socialShareBox > .fa-google-plus-square:hover{
	color: #c3c3c3;
}


.socialShareBox > .fa-linkedin-square{
	color: #0e76a8;
}

.socialShareBox > .fa-linkedin-square:hover{
	color: #c3c3c3;
}

.bg-facebook, .bg-facebook:hover, .bg-facebook:focus{
  background-color: #3b5998;
}
.bg-instagram, .bg-instagram:hover, .bg-instagram:focus{
  background-color: #ac2bac;
}
.bg-linkedin, .bg-linkedin:hover, .bg-linkedin:focus{
  background-color: #0082ca;
}
.bg-twitter, .bg-twitter:hover, .bg-twitter:focus{
  background-color: #55acee;
}
.bg-whatsapp, .bg-whatsapp:hover, .bg-whatsapp:focus{
  background-color: #25d366;
}
.bg-email, .bg-email:hover, .bg-email:focus{
  background-color: #dd4b39;
}
.bg-sms, .bg-sms:hover, .bg-sms:focus{
  background-color: #f5935c;
}

.btn-share-social{
  font-size: 1.2rem;
}

/* REACTIONS: pill riassuntiva + picker */
.reaction-bar{
  --reaction-surface: #fbfbfb;
  --reaction-surface-hover: #eee;
  --reaction-selected: #e3f0f8;
  --reaction-popover: #fff;
  --reaction-shadow: 0 10px 28px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .08);
  --reaction-text: #4f4f4f;
  --reaction-muted: #757575;
  --reaction-accent: #007ac1;
  --reaction-tooltip: rgba(33, 33, 33, .92);
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Sprite reactions_med.png: 50px per icon, --emoji-y is the offset measured in icon heights */
.reaction-emoji{
  --emoji-size: 1.5rem;
  display: block;
  flex: none;
  width: var(--emoji-size);
  height: var(--emoji-size);
  background-image: url("https://media.tio.ch/static/img/reactions/reactions_med.png");
  background-repeat: no-repeat;
  background-size: var(--emoji-size) auto;
  background-position: 0 calc(var(--emoji-y) * var(--emoji-size));
}
.reaction-emoji.up{ --emoji-y: -38.6; }
.reaction-emoji.down{ --emoji-y: -39.56; }
.reaction-emoji.angry{ --emoji-y: -32.9; }
.reaction-emoji.happy{ --emoji-y: -5.76; }
.reaction-emoji.lol{ --emoji-y: -22.54; }
.reaction-emoji.surprised{ --emoji-y: -19.16; }
.reaction-emoji.sad{ --emoji-y: -9.16; }
.reaction-emoji.love{ --emoji-y: -4.68; }
.reaction-emoji.nocomment{ --emoji-y: -40.54; }

/* Summary pill: top reactions + total, opens the picker */
.reaction-summary{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  height: 2.8125rem;
  padding: 0 1rem 0 .625rem;
  border: 0;
  border-radius: 2rem;
  background-color: var(--reaction-surface);
  color: var(--reaction-text);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.reaction-summary:hover,
.reaction-bar.is-open .reaction-summary{
  --reaction-surface: var(--reaction-surface-hover);
}
.reaction-summary:focus-visible{
  outline: 2px solid var(--reaction-accent);
  outline-offset: 2px;
}
.reaction-summary.is-active{
  --reaction-surface: var(--reaction-selected);
  --reaction-surface-hover: var(--reaction-selected);
  color: var(--reaction-accent);
}

.reaction-summary-cta{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.reaction-summary-cta .fa-face-smile-plus{
  font-size: 1.25rem;
}
.reaction-summary.is-empty{
  padding-left: 1rem;
}
.reaction-summary.is-empty .reaction-summary-icons,
.reaction-summary.is-empty .reaction-summary-total,
.reaction-summary:not(.is-empty) .reaction-summary-cta{
  display: none;
}

.reaction-summary-icons{
  display: inline-flex;
  align-items: center;
}
.reaction-summary-icons .reaction-emoji{
  position: relative;
  border-radius: 50%;
  background-color: var(--reaction-surface);
  box-shadow: 0 0 0 2px var(--reaction-surface);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.reaction-summary-icons .reaction-emoji + .reaction-emoji{
  margin-left: -.25rem;
}
.reaction-summary-icons .reaction-emoji:nth-child(1){ z-index: 3; }
.reaction-summary-icons .reaction-emoji:nth-child(2){ z-index: 2; }
.reaction-summary-icons .reaction-emoji:nth-child(3){ z-index: 1; }

.reaction-summary.is-bumped .reaction-summary-icons .reaction-emoji:first-child{
  animation: reaction-bump .45s cubic-bezier(.34, 1.56, .64, 1);
}

/* Picker */
.reaction-picker{
  position: absolute;
  right: 0;
  bottom: calc(100% + .5rem);
  z-index: 20;
  max-width: calc(100vw - 2rem);
  padding: .375rem;
  border-radius: 1.75rem;
  background-color: var(--reaction-popover);
  box-shadow: var(--reaction-shadow);
  visibility: hidden;
  opacity: 0;
  transform: translateY(.5rem) scale(.96);
  transform-origin: bottom right;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.reaction-bar.opens-below .reaction-picker{
  top: calc(100% + .5rem);
  bottom: auto;
  transform: translateY(-.5rem) scale(.96);
  transform-origin: top right;
}
.reaction-bar.is-open .reaction-picker{
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
/* Invisible bridge over the gap, so the mouse can reach the picker without closing it */
.reaction-picker::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: .5rem;
}
.reaction-bar.opens-below .reaction-picker::after{
  top: auto;
  bottom: 100%;
}

/* Popover API: top layer, positioned (fixed) by JS next to the pill */
@supports selector(:popover-open){
  .reaction-picker[popover]{
    position: fixed;
    inset: auto;
    margin: 0;
    border: 0;
    overflow: visible;
    color: inherit;
  }
  @starting-style{
    .reaction-bar.is-open .reaction-picker:popover-open{
      opacity: 0;
      transform: scale(.96);
    }
  }
}

.reaction-picker-list{
  display: flex;
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reaction-option{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  min-width: 3rem;
  padding: .375rem .25rem .3125rem;
  border: 0;
  border-radius: 1.375rem;
  background-color: transparent;
  color: var(--reaction-muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.reaction-option[aria-checked="true"]{
  background-color: var(--reaction-selected);
  color: var(--reaction-accent);
}
.reaction-option:focus-visible{
  outline: 2px solid var(--reaction-accent);
  outline-offset: -2px;
}
.reaction-option .reaction-emoji{
  --emoji-size: 2.5rem;
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.reaction-bar.is-open .reaction-option .reaction-emoji{
  animation: reaction-enter .28s cubic-bezier(.34, 1.56, .64, 1) backwards;
  animation-delay: calc(var(--reaction-index, 0) * 25ms);
}
.reaction-option-count{
  min-height: .75rem;
}

/* Label tooltip, only meaningful with a mouse or keyboard */
.reaction-option::before{
  content: attr(aria-label);
  position: absolute;
  bottom: calc(100% + .25rem);
  left: 50%;
  padding: .3125rem .5rem;
  border-radius: .375rem;
  background-color: var(--reaction-tooltip);
  color: #fff;
  font-size: .75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, .25rem);
  transition: opacity .12s ease, transform .12s ease;
}
.reaction-option:focus-visible::before{
  opacity: 1;
  transform: translate(-50%, 0);
}
.reaction-option:focus-visible .reaction-emoji{
  transform: translateY(-.25rem) scale(1.2);
}
@media (hover: hover) and (pointer: fine){
  .reaction-option:hover::before{
    opacity: 1;
    transform: translate(-50%, 0);
  }
  .reaction-option:hover .reaction-emoji{
    transform: translateY(-.25rem) scale(1.2);
  }
}

/* Narrow phones: the pill shares the row with the four toolbar buttons */
@media (max-width: 399.98px){
  .reaction-summary{
    padding: 0 .75rem 0 .5rem;
  }
  .reaction-summary-icons .reaction-emoji:nth-child(n+3){
    display: none;
  }
  .reaction-option{
    min-width: 2.75rem;
  }
  .reaction-option .reaction-emoji{
    --emoji-size: 2.25rem;
  }
}
@media (max-width: 374.98px){
  .reaction-summary.is-empty{
    width: 2.8125rem;
    padding: 0;
    justify-content: center;
  }
  .reaction-summary-label{
    display: none;
  }
}
@media (max-width: 359.98px){
  .reaction-summary-icons .reaction-emoji:nth-child(n+2){
    display: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .reaction-picker,
  .reaction-option,
  .reaction-option .reaction-emoji,
  .reaction-option::before{
    transition: none;
  }
  .reaction-bar.is-open .reaction-option .reaction-emoji,
  .reaction-summary.is-bumped .reaction-summary-icons .reaction-emoji:first-child{
    animation: none;
  }
}

@keyframes reaction-enter{
  from{
    opacity: 0;
    transform: translateY(.5rem) scale(.5);
  }
}
@keyframes reaction-bump{
  40%{
    transform: scale(1.35);
  }
}

/* AUDIO LOADING SPINNER */
.btn-audio .loading {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-audio-spin 0.75s linear infinite;
}
@keyframes btn-audio-spin {
  to { transform: rotate(360deg); }
}

/* FONT SIZE SLIDER */
#font-size-slider{
  position: absolute;
  top: 60px;
  font-size: 1.3rem !important;
}
#font-size-slider .thumb{
  display: none !important;
}