.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.etc{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.alpha0{ opacity:0; }
.alpha10{ opacity:.1; }
.alpha20{ opacity:.2; }
.alpha30{ opacity:.3; }
.alpha40{ opacity:.4; }
.alpha50{ opacity:.5; }
.alpha60{ opacity:.6; }
.alpha70{ opacity:.7; }
.alpha80{ opacity:.8; }
.alpha90{ opacity:.9; }
.alpha100{ opacity:1; }
.font-read{
	font-size:1.1rem;
}
.gotoPage{
	cursor:pointer;
}
.bgw{
	background-color:#fff;
}
.bgb20{
	background:rgba(0,0,0,.1) !important;
}
.bgw95{
	background:rgba(255,255,255,.95) !important;
}
.fw{
	color:#fff;
}
.bold{
	font-weight:800; 
}
.fd{
	color:#1a1a1c;
}
.tl{
  text-align:left;
}
.tr{
  text-align:right;
}
.tc{
  text-align:center;
}
.vt{
	vertical-align:top;
}
.vm{
	vertical-align:middle;
}
.color0{
  color:#767381;
}
.color1{
  color:#ff4d60;
}
.border_color1{
  border:1px solid #ff4d60 !important;
}
.color2{
  color:#2ac1a8;
}
.color3{
  color:#2aa2dc;
}
.color4{
  color:#c3c3c3;
}
.sl{
  margin-left:5px;
}
.sr{
  margin-right:5px;
}
.f10{
	font-size:10px;
}
.f12{
	font-size:12px;
}
.f14{
	font-size:14px;
}
.f16{
	font-size:16px;
}
.f18{
	font-size:18px;
}
.f20{
	font-size:20px;
}
.f22{
	font-size:22px;
}
.f28{
	font-size:28px;
}
.f42{
	font-size:42px;
}
.f48{
	font-size:48px;
}
.b5{
	border-radius:5px !important;
}
.b10{
	border-radius:10px !important;
}
.b20{
	border-radius:20px !important;
}
.b30{
	border-radius:30px !important;
}
.b60{
	border-radius:60px !important;
}
.l-120{
	line-height: 120%;
}
.l-140{
	line-height: 140%;
}
.l-160{
	line-height: 160%;
}
.l-180{
	line-height: 180%;
}
.st-2{
	margin-top:2px !important;
}
.sb-2{
	margin-bottom:2px !important;
}
.sl-2{
	margin-left:2px !important;
}
.sr-2{
	margin-right:2px !important;
}
.st-5{
	margin-top:5px !important;
}
.sb-5{
	margin-bottom:5px !important;
}
.sl-5{
	margin-left:5px !important;
}
.sr-5{
	margin-right:5px !important;
}
.mt-10{
	margin-top:10px !important;
}
.mb-10{
	margin-bottom:10px !important;
}
.btn-size{
	width:30px;
	height:30px;
}
.centralize{
	position: absolute; top:50%; left:50%; transform:translate(-50%,-50%);
}
.bg-cover{
	background-size:cover; 
	background-position: center center;
	background-repeat:no-repeat;
}
.pm-0{
	padding:0px !important; 
	margin:0px !important;
}
.wh-100{
	width:100%; height:100%; 
}
.s2scrollh{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.s2scrollh::-webkit-scrollbar{
  height: 6px;
}
.s2scrollh::-webkit-scrollbar-thumb{
  background-color: rgba(129,129,129,.35);
  border-radius: 6px;
}
.s2scrollh::-webkit-scrollbar-track{
  background-color: transparent;
}
.scrollhidden::-webkit-scrollbar {
  display: none;
}
.scrollhidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.text_more{
  font-size:10px; 
  font-weight:600; 
  padding:2px 6px 2px 6px; 
  border-radius:12px; 
  border:1px solid rgba(255,77,96,.4);
  color:rgba(255,77,96,.4);
}
.translate_bt{
  font-size:10px; 
  font-weight:600; 
  padding:2px 6px 2px 6px; 
  border-radius:12px; 
  border:1px solid rgba(118,115,129,.4);
  color:rgba(118,115,129,.4);
}
.shadow{
  box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.2);
}
.shadow_text{
	text-shadow: 0px 0px 10px rgba(0,0,0,.6);
}
.shadow_text_light{
	text-shadow: 0px 0px 10px rgba(0,0,0,.3);
}
.formline{
	border:2px solid rgba(0,0,0,.2) !important;
}
.img-bg{
  background-repeat: no-repeat;
  background-size:cover;
  background-position:center center;
}
.menu-header{
  top:0px; 
  min-height:0px !important; 
  background-color:transparent; 
  display:none; 
  text-align: center;
}
.menu-header-bg{
  display:inline-block; 
  width:100%; 
  max-width:700px; 
  border-radius:0.428rem; 
  text-align:left; 
}
.inline{
  display:inline-block;
}
.relative{
  position:relative;
}
.absolute{
  position:absolute;
}
.pointer{
  cursor:pointer;
}
.img_box{
	position:relative;
	background-color:rgba(0,0,0,.05);
	border-radius:20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px !important;
    padding: 0px !important;
}
.img_box_inside{
	width:100%; 
	height:100%; 
	border-radius:6px; 
	background-size:cover; 
	background-position:center center; 
	background-repeat: no-repeat;
}
.thumb_box{
	position:relative;
	background-color:rgba(0,0,0,.05);
	border-radius:20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px !important;
    padding: 0px !important;
}
.thumb_preloader{
	background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
}
.thumb_img{
	width:100%; 
	height:100%; 
	border-radius:6px; 
	background-size:cover; 
	background-position:center center; 
	background-repeat: no-repeat;
}
.thumb_medias_box{
	width:86px; 
	height:86px; 
	border-radius:30px; 
	background-color:rgba(30,30,30,.1); 
	background-size: 20px; 
	background-position: center center; 
	background-repeat: no-repeat;
}
.thumb_medias_inside{
	border-radius:30px; 
	width:100%;
	height:100%;
	background-position: center center; 
	background-size:cover; 
}
.s2_bt_shadow {
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.08);
  -webkit-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.08);
  -moz-box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.08);
}
.title_etc{
  white-space: nowrap;   
  overflow: hidden;           
  text-overflow: ellipsis;   
  display: block;             
  max-width: 100%;           
}
.notify_thumb{
  width:60px; 
  height:46px; 
  border-radius:4px; 
  background-color:rgba(0,0,0,.05);
  background-size:20px; 
  background-repeat:no-repeat; 
  background-position:center center;
}
.notify_thumb_inside{
  width:60px; 
  height:46px; 
  border-radius:4px;
  background-size:cover;
  background-position:center center;
}
.th2-init{
	border-top:0px !important; 
	border-radius: 20px 0px 0px 0px !important;
	padding:12px !important;
}
.th2{
	border-top:0px !important;
	padding:12px !important;
}
.th2-end{
	border-top:0px !important;
	border-radius: 0px 20px 0px 0px !important; 
	text-align:right;
	padding:12px !important;
}
.td2{
	padding:12px 16px !important;
}
@keyframes todark_bg {
  from {background-color: #ffffff;}
  to {background-color: #1a1a1c;}
}
@keyframes todark_menu {
  from {background-color: #ffffff;}
  to {background-color: #1f1f23;}
}
@keyframes todark_menu_round {
  from {background-color: #ffffff; border-radius: 20px; }
  to {background-color: #1f1f23; border-radius: 20px; }
}
@keyframes tolight_bg {
  from {background-color: #1a1a1c;}
  to {background-color: #ffffff;}
}
@keyframes tolight_menu {
  from {background-color: #1f1f23; }
  to {background-color: #ffffff;}
}
@keyframes tolight_menu_round {
  from {background-color: #1f1f23; border-radius: 20px; }
  to {background-color: #ffffff; border-radius: 20px; }
}
@keyframes orbit {
    0%   { transform: translate(-50%, -50%) translate(0px, 0px); }
    25%  { transform: translate(-50%, -50%) translate(2px, -1px); }
    50%  { transform: translate(-50%, -50%) translate(0px, 2px); }
    75%  { transform: translate(-50%, -50%) translate(-2px, 1px); }
    100% { transform: translate(-50%, -50%) translate(0px, 0px); }
}
.swiper {
  width: 100%;
  height: 430px;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  /*background: #1F1F23;*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#app {
  height: 100%;
  height: 100dvh;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}

.demo-nav {
  height: 48px;
  background: #222;
  display: flex;
  justify-content: center;
  align-items: stretch;
  font-family: monospace;
  color: #fff;
  gap: 16px;
  box-sizing: border-box;
  padding: 6px 16px;
  z-index: 10;
}

.demo-nav {
  font-size: 12px;
}
.demo-nav label {
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
}
.demo-nav label:hover {
  background: rgba(0, 0, 0, 0.1);
}
.demo-nav .dropdown {
  position: absolute;
  background: #111;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  right: 4px;
  top: 4px;
  width: 64px;
  overflow: hidden;
}
.demo-nav .dropdown:not(.visible) {
  display: none;
}
.demo-nav .dropdown span {
  display: block;
  cursor: pointer;
  text-align: right;
  padding: 4px 8px;
  cursor: pointer;
}
.demo-nav .dropdown span:hover {
  background: rgba(255, 255, 255, 0.05);
}

.demo-slider {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 10;
  min-height: 0;
}

.swiper-material {
  height: 280px;
  width: calc(100% - 32px);
  max-width: 800px;
}

.demo-material-image {
  position: absolute;
  left: 0%;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-material-label {
  position: absolute;
  font-size: 24px;
  color: #fff;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  padding: 24px;
  display: flex;
  flex-direction: column;
  font-weight: 500;
  justify-content: flex-end;
  align-items: center;
  white-space: nowrap;
  text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 50%);
}

/*
================
RANKING
================
*/
#ranking-tag{
	position:absolute; 
	margin-top:-116px;
	right: 0px;
}

/*
================
SCROLL
================
*/
.scrolls2{
	overflow: auto;
}
.scrolls2::-webkit-scrollbar {
  width: 5px;
}
.scrolls2::-webkit-scrollbar-track {
  background: transparent
}
.scrolls2::-webkit-scrollbar-thumb {
  background-color: rgba(70,70,80,.2);
}

.scrolls2h{
	overflow-y: auto;
}
.scrolls2h::-webkit-scrollbar {
  height: 5px;
}
.scrolls2h::-webkit-scrollbar-track {
  background: transparent
}
.scrolls2h::-webkit-scrollbar-thumb {
  background-color: rgba(70,70,80,.2);
}
/*
================
PRELOADER
================
*/
.preloader_center{
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform:translate(-50%,-50%);
}

/*
================
INPUTS
================
*/
.password_input{
	cursor:pointer;
}

/* 
--------------------------------------
ANIMATIONS 
--------------------------------------
*/
.heartbeat{
  animation: heartbeat 2s ease-in-out infinite
}
@keyframes heartbeat {
  0% { 
  	transform: rotate(8deg) scale(1);
  }
  50% { 
  	transform: rotate(-8deg) scale(1.1);
  }
  100% { 
  	transform: rotate(8deg) scale(1);
  }
}
.heartbeat-p{
  animation: heartbeat-p 2s ease-in-out infinite
}
@keyframes heartbeat-p {
  0% { 
  	transform: rotate(3deg) scale(1) translate(-50%,0px);
  }
  50% { 
  	transform: rotate(-3deg) scale(1.1) translate(-49%,-3px);
  }
  100% { 
  	transform: rotate(3deg) scale(1) translate(-50%,0px);
  }
}
.breathing{
  animation: breathing 2s ease-in-out infinite
}
@keyframes breathing {
  0% { 
  	transform: rotate(3deg) scale(1);
  }
  50% { 
  	transform: rotate(-20deg) scale(1.1);
  }
  100% { 
  	transform: rotate(3deg) scale(1);
  }
}
.breathing2{
  animation: breathing2 2s ease-in-out infinite
}
@keyframes breathing2 {
  0% { 
  	transform: scale(1);
  }
  50% { 
  	transform: scale(1.2);
  }
  100% { 
  	transform: scale(1);
  }
}

.rotate {
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/*
================
COMMENTS
================
*/
.comment_reply_tag{
  font-size: 13px;
  background-color: #44434c;
  border-radius: 10px;
  padding: 2px 8px 2px 8px;
  color: #fff;
  width: auto;
  position: absolute;
  margin-top:-70px; 
  z-index:1;
}
.comment_emoji{
  width:100%; 
  margin-bottom:4px; 
}
.comment_emoji_scroll{
  padding:5px; 
  overflow:auto; 
  background-color:rgba(0,0,0,.1); 
  border-radius:4px;
}
.comment_emoji_inside{
  font-size:22px; 
  letter-spacing:2.6px;
}
.emoji{
  cursor:pointer;
}
.iam{
	color:#767381;
	font-size: 9px;
    padding: 2px 6px 2px 6px;
    border-radius: 6px;
    border: 1px solid #767381;
    font-weight: 800;
    margin: 0 4px 0 4px;
}
/*
================
STORIES
================
*/
#stories_overflow::-webkit-scrollbar {
    display: none;
}
.stories{
  position:absolute; 
  left:0px; 
  top:0px; 
  width:100%; 
  height:100%; 
  z-index:9999;
}
.stories-inside{
  width:100%; 
  height:100%; 
  background-color:rgba(20,20,22,.95); 
  text-align:left;
}
.stories-box{
  position:absolute; 
  left:0px; 
  top:0px; 
  width:100%; 
  height:100%;
}
.stories-box-inside{
  position:relative;
  width:100%; 
  height:100%;
}

/*
================
TIMELINE
================
*/
#timeline-feed{
	border-top:1px solid rgba(0,0,0,.05); 
	padding-bottom:90px;
}
#timeline-scope-button{
	position:absolute; 
	margin-top:-116px;
	margin-left:6px;
}
.post{
  width:100%; 
  padding-bottom:30px;
}
.post-legend{
  margin:20px; line-height:180%; word-wrap:break-word; 
}
.post-photo-bg-loader{
  width:100%; 
  height:280px; 
  background-color:rgba(0,0,0,.1);  
  background-repeat: no-repeat; 
  background-size:30px; 
  background-position: center center;
}
.post-photo-box{
  width:100%; 
  height:100%; 
  background-size:contain; 
  background-repeat: no-repeat; 
  background-position:center center; 
}
.post-photo-tools{
  position:relative; 
  width:100%; 
  height:100%;
}
.post-inside-centralized{
  position:absolute; 
  top:50%; 
  left:50%; 
  transform: translate(-50%,-50%); 
}
.post-tag-center{
	color:#fff; 
	font-size:11px; 
	position:absolute; 
	top:50%; 
	left:50%; 
	transform: translate(-50%,-50%);
	text-shadow: 0px 0px 10px rgba(0,0,0,.6);
}
.s2video-controller-skew-bar{
	/* # bottom 21 + metade dos 6px de altura = 24, o mesmo eixo do centro do
	   # botao de play (bottom:4px, altura 40px). */
	position:absolute; left:120px; bottom:21px; z-index:1;
}
.s2video-controller-skew-bg{
	width:100%; height:6px; background-color:rgba(255,255,255,.2); border-radius:4px;
	/* # touch-action:none -> no celular o arraste move a barra, nao rola a pagina */
	touch-action:none;
	cursor:pointer;
	position:relative;
}
/* # Area de toque maior que os 6px visiveis, sem mudar o tamanho da barra
   # (o ::before nao entra no getBoundingClientRect usado pra calcular o %) */
.s2video-controller-skew-bg::before{
	content:""; position:absolute; left:0; right:0; top:-12px; bottom:-12px;
}
.s2video-controller-skew-inside{
	height:6px; border-radius:4px; background-color:rgba(26,224,191,.8);
	/* # Sem transicao: quem move a barra e o requestAnimationFrame, quadro a
	   # quadro. Transicao aqui so atrasaria a barra em relacao ao video. */
	pointer-events:none;
}
.s2video-controller-skew-inside-bt{
	position:absolute; left:0%; top:-11px; margin-left:-14px;
	cursor:grab;
	touch-action:none;
}
.s2video-controller-skew-bg.s2scrub-ativo,
.s2video-controller-skew-bg.s2scrub-ativo .s2video-controller-skew-inside-bt,
.s2video-controller-skew-bg.s2scrub-ativo .s2loop-knob{ cursor:grabbing; }

/*
================
VIDEOLOOP
================
*/
/* # Faixa escolhida: o fundo da barra e branco a 20%, aqui sobe pra 45% —
   # marca a selecao sem competir com o verde do progresso. */
.s2loop-range{
	position:absolute; top:0; height:6px; border-radius:4px;
	background-color:rgba(255,255,255,.45);
	pointer-events:none;
}
.s2loop-knob{
	position:absolute; top:-11px; margin-left:-13px;
	cursor:grab; touch-action:none; z-index:2;
	filter: drop-shadow(0px 0px 3px rgba(0,0,0,.6));
}
.s2loop-knob img{ width:20px !important; height:20px !important; }
/* # As pontas ficam com cara de "colchete": a de inicio empurra pra direita,
   # a de fim pra esquerda, pra nao cobrirem o trecho selecionado. */
.s2loop-knob-ini{ margin-left:-18px; }
.s2loop-knob-fim{ margin-left:-4px; }
.s2video-controller-skew-inside{ position:absolute; top:0; }

/*
================
HEATMAP
================
*/
.like-heatmap{
	position:absolute; 
	top:0px; 
	left:0px; 
	width:100%; 
	height:100%;
}
.heatmap-box{
	width:100%; 
	height:100%; 
	background: rgb(14,14,14);
	background: linear-gradient(0deg, rgba(14,14,14,0.8519782913165266) 15%, rgba(14,14,14,0.4009978991596639) 100%);
}
.like-heatmap-start{
	cursor:pointer;
}
.heatmap-canvas{
}

/*
================
FORYOUR
================
*/
.search_bar{
	position:absolute; top:14px; left:20px; width:100%; z-index:1;
}
.search_result_box{
	text-align:left; 
	padding:0px; 
	margin-bottom:15px; 
	padding-bottom: 10px; 
	border-bottom: 1px dotted rgba(84,84,84,.5); 
	cursor:pointer;display:block;
}
.search_result_avatar{
	display:inline-block; 
	vertical-align: top; 
	width:50px; 
	height:50px; 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size: 20px; 
	opacity:1
}
.search_result_data{
	display:inline-block; 
	vertical-align: top; 
	line-height:120%; 
	margin-left:10px; 
	opacity:1
}
.fy_page_title_box{
	border-left:2px solid #1ae0bf; padding: 6px 0 6px 10px; line-height: 140%;
}
.fy_page_title{
	font-size:18px; font-weight:600; 
}
.campaigns_banner{
	position:absolute; 
	bottom:0px; 
	width:100%; 
	height:260px; 
	z-index:1; 
	background: rgb(26,26,28); 
	background: linear-gradient(0deg, rgba(26,26,28,1) 0%, rgba(26,26,28,0) 100%);
}
.campaigns_banner_infos{
	position:absolute; 
	bottom:0px;
}
.campaigns_banner_infos_logo{
	margin-left:-4px;
}
.campaigns_banner_infos_title{
	color:#fff; 
	font-size:32px; 
	font-weight:600;
	line-height: 110%;
}
.campaigns_banner_actions{
	position:absolute; 
	bottom:0px; 
	right:0px; 
	text-align:center;
}
.campaigns_banner_actions_bt{
	margin-bottom:4px;
}
/* # O contador do curtir sai branco, como o de comentarios ao lado: o fundo aqui
   # e a foto da noticia, e o numero na cor do tema sumia nela. O componente do
   # like nao traz cor propria (so a variante giant, que nao e a que roda), entao
   # ele herda daqui. Mesmo caminho do .nw-pg-acoes, na pagina da noticia. */
.campaigns_banner_actions .like{
	color:#fff;
}
.topsupporter1_icon{
  position:relative; 
  width:200px; 
  height:200px; 
}
.topsupporter1_img_bg{
  position:absolute; 
  left:30px; 
  top:30px; 
  width:140px; 
  height:140px; 
  border-radius:50%; 
  background-size:40px; 
  background-repeat:no-repeat; 
  background-position:center center;
}
.topsupporter1_img{
  width:100%; height:100%; border-radius:50%; 
}
.topsupporter1_namebox{
  padding:14px; 
  border-radius:30px;
  background-color:#fff; 
  font-size:18px; 
  font-weight:600;
}

/*
================
PERFIL
================
*/
.perfil_cover{
	height:10px;
	width:100%; 
	/* margin-top:-15px; */
	background-size:cover; 
	background-position: center center; 
	cursor:pointer;
}
.perfil_vips_logo{
	position:absolute; top:15px; left:15px;
}
.perfil_engage{
	position:absolute;
	top:15px; 
	right:15px; 
	font-size:16px;
}
.perfil_engage_box{
	display:inline-block; 
	padding:6px !important; 
	background-color:#fff !important;   
	box-shadow: 1px 5px 21px -10px rgb(0 0 0 / 75%); 
	-webkit-box-shadow: 1px 5px 21px -10px rgb(0 0 0 / 75%); 
	-moz-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75);
}
.perfil_data_box{
	margin-top:-30px; text-align:center; vertical-align: top; color:#5E5873;
}
.perfil_data_numbers_box{
	width:110px; text-align:center; display:inline-block; vertical-align: top; margin-top:45px;
}
.perfil_data_numbers{
	color:#5E5873 !important; margin:0px !important
}
.perfil_data_numbers_tile{
	margin-top:6px; margin-bottom:6px; border-top: 1px solid rgba(0,0,0,0.1) !important;
}
.perfil_avatar{
	display:inline-block;  width:112px; height:112px; border:6px solid #fff; border-radius:10px; background-size: cover; background-position: center center; box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75); -webkit-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75);-moz-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75); background-color:#F8F8F8; cursor:pointer;
}
.perfil_avatar_guest_tag{
	margin-top: 94px;
}
.perfil_avatar_stories{
	position: relative; display:inline-block;  width:112px; height:112px;
}
.perfil_avatar_stories_border{
	width: 112px; height: 112px; cursor:pointer; box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75); -webkit-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75);-moz-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75);
}
.perfil_avatar_stories_box{
	position:absolute; left:0px; top:0px; z-index: 1; width: 112px; height: 112px; background-color:#fff; background-size: cover; background-position: center center; background-size: 20%; background-repeat: no-repeat; border-radius:4px;
}
.perfil_avatar_stories_guest_tag{
	position:absolute; left:0px; width:100%; margin-top:-8px; z-index:100;
}
.perfil_description{
	padding:15px; line-height:180%; overflow:hidden; color:#989898; word-wrap: break-word;
}
.perfil_thumb{
	background-color:#f3f3f3; 
	display:inline-block; 
	margin-bottom:4px; 
	vertical-align:top; 
	width:100px; 
	height:100px; 
	border-radius:10px; 
	cursor:pointer; 
	background-repeat: no-repeat; 
	background-size:20px 20px; 
	background-position:center center;
}
.perfil_thumb_inside{
	position: relative; 
	width:100%; 
	height:100%; 
	background-size: cover; 
	border-radius:10px; 
}
.perfil_thumb_more_box{
	width:100%; 
	height:100%; 
	background-color:rgba(255,255,255,.4);
}
.perfil_thumb_more{
	position: absolute; 
	top:50%; 
	left:50%; 
	font-size:22px; 
	transform:translate(-50%,-50%);
}

.perfil_ranking{
	position:absolute; right:15px; top:45px;
}
.perfil_ranking_box{
	position:absolute; right:36px; margin-top: 3px;
}
.perfil_ranking_inside{
	background-color:#fff; 
	font-size:13px; 
	padding:4px; 
	border-radius:10px;
	-webkit-box-shadow: 1px 5px 21px -10px rgb(0 0 0 / 75%);
	text-align:center;
	line-height: 110%;
	padding: 4px 10px 4px 10px;
}
.item_thumb_box{
	position:relative;
	background-color:rgba(0,0,0,.05);
	border-radius:20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center center;
    margin: 0px !important;
    padding: 0px !important;
    aspect-ratio: 1 / 1; /* o adjustView ja deixava quadrado por JS; aqui nasce quadrado, antes do JS rodar */
}
/* # Thumb como <img> (e nao background-image) para poder usar loading="lazy". */
.item_thumb_img{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
	border-radius:10px;
	display:block;
}

.item_thumb{
	width:100%;
	height:100%;
	background-size:cover; 
	background-position:center center; 
	border-radius:10px; 
	background-repeat: no-repeat;
}
.gradient-border {
    --borderWidth:6px;
    background: #F8F8F8;
    position: relative;
    border-radius: var(--borderWidth);
}
.gradient-border:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #3cdcc2, #ffffff, #fe5464);
    border-radius: calc(2 * var(--borderWidth));
    animation: animatedgradient 3s ease alternate infinite;
    background-size: 300% 300%;
}
@keyframes animatedgradient {
    0%{background-position: 0% 50%;}
    50%{background-position: 100% 50%;}
    100%{background-position: 0% 50%;}
}
/*
================
BUTTONS:
================
*/
.bt_perfil_engage{
	margin: 2px; 
	display:inline-block
}

/*
================
WALLET:
================
*/
.wallet_page{
	position:relative; padding-bottom:90px;
}
.wallet_card{
	width:100%; padding:20px 30px 20px 30px;  
}
.wallet_card_bg{
	background:#363639; width:100%; border-radius:20px; border-bottom:2px solid #ff4d60;
}
.wallet_card_wallpaper{
	width:100%; height:100%; border-radius:20px; background-size:cover; background-position:center center;
}
.wallet_card_overlay{
	position:relative; width:100%; height:100%; border-radius:20px;
}
.wallet_add_funds{
	display:inline-block; border: 1px solid #fff !important; 
	color:#fff; box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.16); 
	-webkit-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.16); 
	-moz-box-shadow: -1px 3px 5px 0px rgba(0,0,0,0.16);
}
.wallet_loading{
	font-size:12px; text-align: center; border-top: 1px solid #efefef;
}
.wallet_bg_thumb{
	margin-bottom:4px; padding:4px !important;
}
.wallet_bg_thumb_box{
	border-radius:10px; background-color:rgba(0,0,0,.01); background-size: 20px 20px; background-position:center center; background-repeat: no-repeat;
}
.wallet_bg_thumb_img{
	width:100%; height:100%; border-radius:10px; background-size:cover; background-position:center center; background-repeat: no-repeat;
}
.wallet_bg_overlay{
	width:100%; height:100%; border-radius:10px; background-color:rgba(0,0,0,.7); 
}
.wallet_bg_thumb_img_checked{
	border:3px solid #fff;
}
.wallet_bg_thumb_check{
	position:absolute; top:10px; left:12px;
}

/*
================
FUNDS:
================
*/
.funds_cover{
	height:200px; background-size:cover; background-position:top center;
}
.funds_page{
	position:relative; width:100%; max-width:700px; display:inline-block;
}
.funds_steps{
	width:40px; background-color:#ff4d60; padding:4px; border-radius:20px; color:#fff;
}
.funds_value_box{
	height:140px; border:1px solid #EBE9F1; border-bottom:3px solid #EBE9F1; background-size:cover; background-position:center center;
}
.funds_value_input{
	text-align: right; 
	font-size: 28px !important; 
	font-weight: 900  !important; 
	height: 60px !important; 
	padding-right: 5px !important;
}

/*
================
PLAYGROUND:
================
*/
.playground_thumb_box{
	border-radius:20px; 
	background-color:rgba(0,0,0,.01); 
	background-size: 20px 20px; 
	background-position:center center; 
	background-repeat: no-repeat; 
}
.playground_thumb_img{
	width:100%; 
	height:100%; 
	border-radius:20px; 
	background-position:center center; 
	background-repeat: no-repeat; 
	background-size:cover; 
}

/*
================
BAG:
================
*/
.bag_thumb_box{
	background-color:rgba(0,0,0,.01); 
	background-size: 20px 20px; 
	background-position:center center; 
	background-repeat: no-repeat; 
}
.bag_thumb_img{
	width:100%; 
	height:100%;
	background-position:center center; 
	background-repeat: no-repeat; 
	background-size:cover; 
}
.bag_user_change_bt{
	position:relative !important;  
	font-size:18px !important;  
	font-weight:600 !important;  
	width:100% !important;  
	border-color:#fff !important; 
	border-bottom:2px solid #fff !important;
}

/*
================
SHOP:
================
*/
.shop_badge{
	display:inline-block;
	padding:6px !important; 
	background-color:#fff; 
	color:#5E5873; 
	margin:5px;
}

/*
================
PRODUCT:
================
*/
.product_cover_box{
	position: relative; display:inline-block;  width:300px; height:120px;
}
.product_cover_border{
	width: 112px; height: 112px; cursor:pointer; 
}
.product_cover_img{
	position:absolute; left:0px; top:0px; z-index: 1; width: 112px; height: 112px; background-color:#fff; background-size: cover; background-position: center center; background-size: 20%; background-repeat: no-repeat; border-radius:4px;
}

/*
================
CHAT:
================
*/
.keyboard_key{
	font-size:11px; 
	padding:4px; 
	border-radius:4px; 
	border:1px solid #c1c1c1; 
	border-bottom:2px solid #c1c1c1;
}
.arrow{
	color:rgba(80,80,80,.2); 
	margin:0 4px 0 4px;
}
#chat-congif-box{
	position:absolute; 
	width:300px; 
	top:56px; 
	right:30px; 
	border-radius:20px; 
	z-index: 9; 
}
#sidebar-content{
	border-right: 1px solid rgba(80,80,80,.1); 
}
.user-chats-s2v{
	background-image:none !important; 
	background-color:rgba(0,0,0,.1) !important; 
	padding:0px 1rem 0px 1rem !important;
}
.chat_msgs_box_s2v{
	width:100%; height:100%; overflow-y: scroll; overflow-x: hidden; padding:6px;
}
.chat_msgs_wait_s2v{
	width:100%; height:100%; position:absolute; top:0px; left:0px;
}
.chat_msgs_wait_s2v_inside{
	position:relative; 
    width:148px; 
    left:50%; 
    top:50%; 
    transform: translate(-50%,-50%);
    text-align:center; 
    line-height:120%;
}
.chat_input_s2v{
	resize: none !important; 
	line-height:140% !important; 
	font-size:16px !important;
	overflow:hidden !important; 
	border-right: 1px solid #D8D6DE !important;
}
.chat-fastmsg-box{
	position:absolute; 
	width:100%; 
	background:rgba(255,255,255,.9); 
	border-radius:8px; 
	box-shadow: 0 4px 24px 0 rgb(34 41 47 / 10%); 
}
.chat-fastmsg-close{
	position:absolute; right:10px; top:10px; cursor:pointer;
}
.chat-fastmsg-edit{
	position:absolute; right:37px; top:12px; cursor:pointer;
}
.chat-fastmsg-start{
	position:absolute; right:37px; top:12px; cursor:pointer;
}
.chat-options-off{
	border-top-right-radius: 5px !important; 
	border-bottom-right-radius: 5px !important;
}
.chat-opt-signature{
	padding:10px; padding-bottom:8px; text-align:center; cursor:pointer;
}
.chat-opt-sendmedia{
	padding:10px; padding-bottom:8px; text-align:center; cursor:pointer;
}
.chat-options-on{
	padding:10px; padding-bottom:5px; text-align:center;
}
.chat-options{
	position:absolute; 
	right: -5px;
    bottom: -5px;
    border: 2px solid rgba(255, 255, 255, .05);
    border-radius: 10px;
}
.chat-options-inside{
	border-radius:10px;
	padding: 10px 10px 0 10px; 
	width:70px;
}
.chat-options-widget-label{
	width:41px;
	text-align:center; 
	padding:4px; 
	font-size:10px; 
	color:#464356;
	font-weight: 800px;
}
.chat_mimo{
	margin-right:40px; cursor: pointer; 
}
.chat_msg_icon_ok{
	color:#d3d3d3; 
	font-size:22px; 
	padding:4px; 
	margin-right:5px;
}
.chat_msg_icon_load{
	color:#d3d3d3; 
	font-size:22px; 
	padding:4px; 
	margin-right:5px; 
}
.chat_audio_cancel{
	width:45px; text-align:center; cursor: pointer; 
}
.chat_audio_cancel_text{
	color:#fff; font-size:22px; padding:4px; margin-right:5px;
}
.chat_audio{
	position: absolute; right: 10px; text-align:center; cursor: pointer; 
}
.chat_audio_time{
	color:#fff; margin-right:10px; vertical-align: middle; 
}
.chat_audio_icon{
	color:#1ebea5; font-size:24px; padding:4px; margin-right:5px; vertical-align: middle;
}
.chat-msg-options-s2v{
	position:absolute; width:240px; top:56px; right:10px;
}
.chat_emoji_box{
	position:absolute; margin-top:-100px;
}
.comment_emoji_chat_scroll{
	opacity:.95; padding:8px; overflow:auto; max-width:660px !important; border-radius:10px;
}
.chat_sendmedia_thumb{
	background-color:#6e6b7b17; 
	background-size:16%; 
	background-repeat:no-repeat; 
	background-position:center center; 
	border-radius:6px;
	position: relative;
}
.chat_sendmedia_box{
	background-size:cover; background-position:center center; border-radius:6px;
}
#chat_more{
	position: absolute; 
	bottom:70px; 
	right:0px;  
    width: 50px;
    font-size: 20px;
    text-align: center;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border: 2px solid rgba(70, 70, 80, .2);
    border-right: 0px;
    display:none;
}
/*
================
CONFIG:
================
*/
.config_publish_logo{
	width:112px; 
	height:112px;
	border-radius:10px; 
	background-size: cover; 
	box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75); 
	-webkit-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75);
	-moz-box-shadow: 1px 5px 21px -10px rgba(0,0,0,0.75); 
	background-position: center center; 
	background-size: 80%; 
	background-repeat:no-repeat;
}
.config_image_edit{
	position:absolute; 
	margin:10px;
	background-color:rgba(26,26,28,.8); 
	padding:4px;
	width: 28px;
    border-radius: 10px;
    font-size: 12px;
    height: 28px;
    color: #1ae0bf;
    border: 1px solid #4f4f4f;
}

/*
================
LIST LINK:
================
*/
.listlink_item-bg{
	background-color: rgb(239, 239, 239);
	background-size: 30px 30px; 
	background-position: 70% center; 
	background-repeat: no-repeat; 
	cursor: pointer;
}
.listlink_item-img{
	width:100%;
	height:100%;
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
}
.listlink_item-degrade{
	width:100%; 
	height:100%;
}
.listlink_item_thumb{
	width:30px; 
	height:30px; 
	padding:4px; 
	background-color:#efefef; 
	background-repeat: no-repeat; 
	background-position: center center; 
	background-size:20px 20px;
}
.listlink_img_box{
	background-color:rgba(0,0,0,.1); 
	background-size: cover; 
	background-position: center center; 
	background-repeat: no-repeat; 
	height:120px; 
	display:block; 
	border: 1px solid #d9d9d9; 
	border-radius: 10px;
}
.input_img_box{
	background-color:rgba(0,0,0,.1); 
	background-size: cover; 
	background-position: center center; 
	background-repeat: no-repeat; 
	height:120px; 
	display:block; 
	border: 1px solid #d9d9d9; 
	border-radius: 10px;
}
.modalpay_bt_active{
	background-color:#d8fdf7; 
	border:2px solid #73c7b9;
	border-bottom:4px solid #73c7b9;
}
.modalpay_bt_desactive{
	background-color:rgba(0,0,0,.05); 
	border:2px solid #d3d3d3;
	border-bottom:4px solid #d3d3d3;
}
.survey-opt{
	background-color: rgba(26,224,191,0);
}
.survey-opt:hover {
    background-color: rgba(26,224,191,0.1);
}
.processingBox{
	height:109px;
}

/*
================
DRIVE:
================
*/
#drive_sideb {
	position: absolute;
	top: 0;
	left: 100%;
	width: 100%;
	height: 100%;
	z-index: 10;
}
@media (min-width: 768px) {
	#drive_sideb {
		position: static !important;
		left: auto !important;
		width: 50% !important;
		z-index: auto !important;
	}
}

/*
================
CHAT V3:
================
*/
#chat-engage-bar{
	height:auto!important;
	min-height:67px;
}
#chat-engage-bar-display{
	align-items:flex-end;
}
#chat_msg,
#chat_mimo{
	align-self:flex-end;
}

#chat-input-area{
	display:flex;
	flex:1;
	flex-direction:column;
	justify-content:flex-end;
	min-width:0;
}
#chat-input-box{
	display:flex;
	width:100%;
	min-width:0;
	flex:none;
}
#chat-input-box #chat-input{
	display:block;
	width:100%;
	min-width:0;
}
#chat-reply-box{
	display:block;
	width:100%;
	margin-bottom:4px;
}
.chat-reply-box-content{
	border-radius:4px;
	display:flex;
	align-items:center;
	width:100%;
	min-height:54px;
	padding:7px 10px 7px 8px;
	border-bottom:1px solid rgba(120,120,130,.15);
	background:#f7f7f7;
}
.chat-reply-box-line{
	width:4px;
	min-width:4px;
	height:38px;
	margin-right:9px;
	border-radius:4px;
	background:#2ac1a8;
}
.chat-reply-box-info{
	flex:1;
	min-width:0;
	overflow:hidden;
}
.chat-reply-name{
	font-size:12px;
	font-weight:600;
	color:#2ac1a8;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat-reply-message{
	margin-top:2px;
	font-size:12px;
	color:#9b9b9b;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat-reply-close{
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	margin-left:8px;
	cursor:pointer;
	color:#a5a5a5;
}
.chat-reply-close:hover{
	color:#fe5464;
}
.chat-msg-reply{
	display:inline-flex;
	align-items:center;
	margin-right:7px;
	cursor:pointer;
	color:#a5a5a5;
}
.chat-msg-reply:hover{
	color:#2ac1a8;
}
.chat-reply-selected .chat-content{
	/* box-shadow:0 0 0 2px rgba(75,154,240,.35)!important; */
}
.chat-msg-reply-reference{
	display:block;
	min-width:150px;
	margin-bottom:7px;
	padding:7px 9px;
	border-left:4px solid #2ac1a8;
	border-radius:4px;
	background:#d5d5d536;
	cursor:pointer;
	overflow:hidden;
}
.chat-msg-reply-reference:hover{
	background:rgba(70,70,80,.25);
}
.chat-msg-reply-reference-name{
	font-size:11px;
	font-weight:600;
	color:#2ac1a8;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat-msg-reply-reference-message{
	width: 200px;
	margin-top:2px;
	font-size:11px;
	color:#b9b9c3;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.chat-msg-reply-highlight .chat-content{
	animation:chat-msg-reply-highlight 1.2s ease;
}
@keyframes chat-msg-reply-highlight{
	0%,100%{ box-shadow:none; }
	30%,70%{ box-shadow:0 0 0 3px rgba(95,252,226,1); }
}
.chat-msg-like{
	position:relative;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	transition:transform .14s ease;
}
.chat-msg-like-icon{
	position:relative;
	transition:color .12s ease,transform .14s ease;
}
.chat-msg-like.active .chat-msg-like-icon{
	color:#fe5464!important;
}
.chat-msg-like.chat-like-pulse .chat-msg-like-icon{
	animation:chat-like-heart-pulse .28s ease;
}
.chat-msg-like-effect{
	position:absolute;
	left:50%;
	top:50%;
	z-index:1;
	color:#fe5464;
	pointer-events:none;
	opacity:0;
	transform:translate(-50%,-50%) scale(1);
}
.chat-msg-like.chat-like-pulse .chat-msg-like-effect{
	animation:chat-like-heart-effect .32s ease-out;
}
@keyframes chat-like-heart-pulse{
	0%{ transform:scale(1); }
	45%{ transform:scale(1.16); }
	100%{ transform:scale(1); }
}
@keyframes chat-like-heart-effect{
	0%{
		opacity:.7;
		transform:translate(-50%,-50%) scale(1);
	}
	100%{
		opacity:0;
		transform:translate(-50%,-50%) scale(1.10);
	}
}
.chat-content{
	word-break: break-word;
	overflow-wrap: anywhere;
}
.chat-typing-message{
	opacity:0;
	transform:translateY(5px);
	animation:chat-typing-message-show .18s ease forwards;
}
.chat-typing-message .chat-content{
	display:flex;
	align-items:center;
	justify-content:center;
	min-width:54px;
	height:38px;
	padding:0 15px!important;
}
.chat-typing-dots{
	display:flex;
	align-items:center;
	gap:4px;
	height:14px;
}
.chat-typing-dots span{
	display:block;
	width:6px;
	height:6px;
	border-radius:50%;
	animation:chat-typing-dot 1.2s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2){ animation-delay:.15s; }
.chat-typing-dots span:nth-child(3){ animation-delay:.30s; }

@keyframes chat-typing-dot{
	0%,60%,100%{
		opacity:.45;
		transform:translateY(0);
	}
	30%{
		opacity:1;
		transform:translateY(-4px);
	}
}
@keyframes chat-typing-message-show{
	to{
		opacity:1;
		transform:translateY(0);
	}
}
@media (max-width:767.98px){
	.chat-content p{
		font-size:16px !important;
	}
	.chat-msg-tools{
		margin-top:5px;
	}
	.chat-msg-tools i{
		font-size:18px !important;
	}
}

/*
================
CHAT MESSAGE MENU:
================
*/
.chat-content{
	position:relative;
	overflow:visible;
}
.chat-msg-tools{
	position:relative;
	margin-top:5px;
	min-height:18px;
}
.chat-msg-actions{
	position:relative;
	float:left;
	display:flex;
	align-items:center;
	gap:8px;
	min-height:18px;
}
.chat-msg-menu-trigger{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:18px;
	height:18px;
	color:#a5a5a5;
	cursor:pointer;
	opacity:.4;
	transition:opacity .12s ease,color .12s ease;
}
.chat-content:hover .chat-msg-menu-trigger,
.chat-msg-menu-trigger.active{
	opacity:1;
}
.chat-msg-menu-trigger:hover,
.chat-msg-menu-trigger.active{
	color:#2ac1a8;
}
.chat-msg-like{
	display:none;
	min-width:18px;
	height:18px;
}
.chat-msg-like.active{
	display:inline-flex;
}
.chat-msg-like-disabled{
	cursor:default;
	pointer-events:none;
}
.chat-msg-menu{
	position:fixed;
	left:0;
	top:0;
	z-index:9999;
	display:none;
	min-width:145px;
	padding:5px;
	border:1px solid rgba(80,80,90,.12);
	border-radius:8px;
	box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.chat-msg-menu-item{
	display:flex;
	align-items:center;
	gap:9px;
	padding:8px 10px;
	border-radius:6px;
	color:#767381;
	white-space:nowrap;
	cursor:pointer;
}
.chat-msg-menu-item:hover{
	background:rgba(42,193,168,.10);
	color:#2ac1a8;
}
.chat-msg-menu-item i{
	width:16px;
	text-align:center;
}
@media (max-width:767.98px){
	.chat-msg-menu-trigger{
		opacity:.4;
	}
	.chat-msg-menu-trigger.active{
		opacity:1;
	}
}

.chat-msg-pending{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:18px;
	height:18px;
	margin-right:2px;
	color:#a5a5a5;
	font-size:12px;
	opacity:.65;
}
.msg_special_box{
	border:2px solid rgba(70,70,80,.15)
}
.msg_special_product_inside{
	max-width:320px;
}

/*
=====================
CHATWS:
=====================
*/
.chat_audio_box{
	width:200px;
	min-height:58px;
	display:flex;
	align-items:center;
	gap:10px;
	user-select:none;
	-webkit-user-select:none;
}
.chat_audio_player{
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 34px;
	cursor:pointer;
}
.chat_audio_button{
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
}
.chat_audio_body{
	width:0;
	min-width:0;
	flex:1 1 auto;
	overflow:hidden;
}
.chat_audio_wave{
	position:relative;
	width:100%;
	height:30px;
	overflow:hidden;
	cursor:pointer;
	touch-action:none;
}
.chat_audio_wave_base,
.chat_audio_wave_active{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:30px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:0;
	overflow:hidden;
}
.chat_audio_wave_progress{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:30px;
	overflow:hidden;
	clip-path:inset(0 100% 0 0);
	-webkit-clip-path:inset(0 100% 0 0);
	pointer-events:none;
}
.chat_audio_wave_base,
.chat_audio_wave_active,
.chat_audio_wave_progress{
	box-sizing:border-box;
}
.chat_audio_wave_bar{
	width:3px;
	min-width:3px;
	max-width:3px;
	flex:0 0 3px;
	border-radius:4px;
	background:rgba(110,107,123,.15);
}
.chat_audio_wave_active .chat_audio_wave_bar{
	background:#2ac1a8;
}
.chat_audio_footer{
	height:16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.chat_audio_current{
	font-size:10px;
	font-weight:600;
	opacity:.65;
}
.chat_audio_speed{
	min-width:25px;
	height:17px;
	padding:0 6px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	font-size:10px;
	font-weight:700;
	background:rgba(110,107,123,.15);
}
.audioplayers{
	display:none;
}
.chat_audio_wave.chat_audio_dragging{
	cursor:grabbing;
}
.chat_audio_wave_loading{
	opacity:.6;
}
.chat_audio_wave_loading:before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:100%;
	height:2px;
	transform:translateY(-50%);
	border-radius:5px;
	background:rgba(110,107,123,.25);
}
.chat-msg-text-more{
	border: 1px solid #ff4d60; 
	padding:4px 6px; 
	font-weight:600;
	white-space:nowrap; 
	margin-left:4px;
}

/* CHAT GIFT: */

#chat-gifts-content{display:none;}
.chat-gift-option{padding:2px; transition:opacity .2s ease;}
.chat-gift-option .chat-gift-content{padding:4px; transition:transform .2s ease;}
.chat-gift-option .item_thumb_box{border:2px solid transparent; border-radius:8px; overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease;}
.chat-gift-option.chat-gift-unselected{opacity:.3;}
.chat-gift-option.chat-gift-selected{opacity:1;}
.chat-gift-option.chat-gift-selected .chat-gift-content{transform:translateY(-2px);}
.chat-gift-option.chat-gift-selected .item_thumb_box{
	border-color:rgba(255,255,255,.9);
	box-shadow:0 3px 10px rgba(0,0,0,.12);
	background:linear-gradient(120deg,#ffffff,#e5fffa,#ffffff,#ffd8db,#ffffff);
	background-size:300% 300%;
	animation:chatGiftGradient 4s ease infinite;
}
.chat-gift-option .thumb_img{opacity:0; transition:opacity .25s ease;}
.chat-gift-option .thumb_img.chat-gift-image-loaded{opacity:1;}
.chat-gift-price{
	display:inline-block;
	padding:4px 6px;
	border:2px solid #1ebea5;
	border-radius:10px;
	color:#1ebea5;
	transition:color .2s ease,border-color .2s ease,background-color .2s ease;
}
.chat-gift-option.chat-gift-unselected .chat-gift-price{
	color:#c3c3c3!important;
	border-color:#c3c3c3;
}
.chat-gift-option.chat-gift-selected .chat-gift-price{
	color:#1ebea5!important;
	border-color:#1ebea5;
	background-color:rgba(30,190,165,.08);
}
.chat-gift-option .chat-gift-name{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	transition:all .2s ease;
}

.chat-gift-option.chat-gift-selected .chat-gift-name{
	white-space:normal;
	overflow:visible;
	text-overflow:initial;
	font-weight:600;
}
@keyframes chatGiftGradient{
	0%{background-position:0% 50%;}
	50%{background-position:100% 50%;}
	100%{background-position:0% 50%;}
}
.chat-msg-menu-reactions{
	display:grid;
	grid-template-columns:repeat(4,34px);
	gap:4px;
	padding:8px;
	border-bottom:1px solid rgba(150,150,160,.15);
}
.chat-msg-reaction-option{
	display:flex;
	align-items:center;
	justify-content:center;
	width:34px;
	height:34px;
	border-radius:8px;
	font-size:21px;
	line-height:1;
	cursor:pointer;
	transition:background-color .15s ease,transform .15s ease;
}
.chat-msg-reaction-option:hover,
.chat-msg-reaction-option.active{
	background:rgba(150,150,160,.18);
	transform:scale(1.12);
}
.chat-msg-reaction{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-size:17px;
	line-height:1;
	vertical-align:middle;
}
.chat-msg-reaction.chat-reaction-elastic{
	animation:chatReactionElasticBounce .65s both;
}
@keyframes chatReactionElasticBounce{
	0%{opacity:0;transform:scale(.2);}
	42%{opacity:1;transform:scale(1.35);}
	62%{transform:scale(.82);}
	78%{transform:scale(1.13);}
	90%{transform:scale(.96);}
	100%{opacity:1;transform:scale(1);}
}
@keyframes chatEngageBarEnter{
	0%{opacity:0; transform:scale(.985) translateY(3px);}
	60%{opacity:1; transform:scale(1.008) translateY(0);}
	100%{opacity:1; transform:scale(1) translateY(0);}
}
@keyframes chatAudioPulse{
	0%,100%{transform:scale(1); opacity:1;}
	50%{transform:scale(1.14); opacity:.72;}
}
.chat-engage-bar-enter{animation:chatEngageBarEnter .24s ease-out;}
#chat_audio_recording_icon.chat-audio-recording{animation:chatAudioPulse 1.15s ease-in-out infinite; transform-origin:center;}
/* ==========================================================================
   TAREFAS (adm_tasks): grade do mes, tarefa e backlog
   ==========================================================================
   As cores saem de rgba sobre o fundo do card, e nao de hex fixo: a tela
   existe nos dois temas e o card ja muda de cor sozinho. Fixar a cor aqui
   quebraria o modo claro ou o escuro, um dos dois. */
.s2scrollv{
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.s2scrollv::-webkit-scrollbar{
  width: 6px;
}
.s2scrollv::-webkit-scrollbar-thumb{
  background-color: rgba(129,129,129,.35);
  border-radius: 6px;
}
.s2scrollv::-webkit-scrollbar-track{
  background-color: transparent;
}
/* --- linha do tempo da semana --- */
/* # Faixas empilhadas, uma por dia, de segunda a domingo. Nao e grade de mes:
   # a coluna e estreita e sete celulas lado a lado deixariam a tarefa
   # ilegivel — aqui cada dia tem a largura inteira.
   #
   # Sem card e sem borda ao redor: sete caixas empilhadas viram sete molduras
   # competindo com as tarefas, que ja sao caixas. Uma linha separando basta
   # para dizer onde um dia termina e o outro comeca. */
.agenda-grade{
  max-height: 620px;
}
.agenda-dia{
  border-bottom: 1px solid rgba(129,129,129,.18);
  padding: 8px 2px 10px 2px;
}
.agenda-dia:last-child{
  border-bottom: none;
}
.agenda-dia-cab{
  margin-bottom: 6px;
}
/* # O nome do dia e a ancora de leitura da coluna: herda a cor normal do tema
   # (sem opacidade) e vem maior que o resto para se achar na rolagem. */
.agenda-dia-nome{
  text-transform: capitalize;
  font-size: 14px;
  letter-spacing: .2px;
}
/* # Badge do numero do dia: largura minima para que os sete fiquem alinhados
   # entre si, senao "5" e "31" empurrariam o nome do dia para posicoes
   # diferentes e a coluna perderia o prumo. */
.agenda-dia-badge{
  min-width: 26px;
  text-align: center;
  font-size: 11px;
}
/* # Dia que ja passou recua so o suficiente para sair da frente. Nao some:
   # o que ficou para tras e justamente o que precisa ser remarcado. */
/* # Dia passado recua em opacidade, mas o nome continua em negrito: e o
   # rotulo da faixa, e tirar o peso dele so de alguns dias fazia a coluna
   # parecer ter dois tipos de dia. */
.agenda-dia-passado .agenda-dia-nome{
  opacity: .55;
}
/* # Hoje se marca no proprio dia, com um tracinho a esquerda, e nao com
   # moldura — que e o que acabamos de tirar. */
.agenda-dia-hoje{
  border-left: 3px solid #2ac1a8;
  padding-left: 8px;
}
.agenda-dia-hoje .agenda-dia-nome{
  color: #2ac1a8;
}
/* # Alvo do arrastar: sem borda para pintar, o aviso vira um fundo suave na
   # faixa inteira. */
.agenda-dia-alvo{
  background-color: rgba(42,193,168,.12);
  border-radius: 6px;
}
/* # A area de itens tem altura minima para o dia vazio continuar sendo alvo
   # de soltura — sem isso nao haveria onde largar a tarefa. */
.agenda-dia-itens{
  min-height: 26px;
}
.agenda-dia-vago{
  padding: 2px 0;
}
/* --- tarefa --- */
/* # Raio de 4px, e nao o b20 do resto do app: o card e pequeno e aparece
   # dezenas de vezes empilhado — canto muito redondo faz a lista parecer uma
   # fileira de pilulas e come a area util do titulo. */
.agenda-task{
  position: relative;
  background-color: rgba(129,129,129,.12);
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: grab;
}
.agenda-task:hover{
  background-color: rgba(129,129,129,.2);
}
/* # A tarefa que e minha: sem fundo, so a borda — e a mesma cor e a mesma
   # opacidade que o fundo da tarefa do agente, entao as duas pesam igual na
   # coluna sem que uma pareca apagada.
   #
   # A borda transparente na .agenda-task existe so para as duas terem a mesma
   # altura: sem ela o card com borda cresceria 2px e a lista ficaria irregular. */
.agenda-task-minha{
  background-color: transparent;
  border-color: rgba(129,129,129,.12);
}
.agenda-task-minha:hover{
  background-color: transparent;
  border-color: rgba(129,129,129,.35);
}
.agenda-task-feita{
  opacity: .5;
}
.agenda-task-feita b{
  text-decoration: line-through;
}
.agenda-check{
  cursor: pointer;
  line-height: 1.2;
}
/* # Lixeira solta a direita, fora do fluxo: no fluxo ela empurrava o titulo
   # em toda linha por causa de uma acao rara.
   #
   # Centrada pelo par top:50% + translateY(-50%), e nao por uma margem fixa:
   # o card muda de altura conforme o titulo quebra em duas linhas, e um
   # deslocamento fixo so acertaria o alinhamento num dos dois casos. */
.agenda-excluir{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 8px;
  font-size: 13px;
  opacity: .7;
  cursor: pointer;
}
.agenda-excluir:hover{
  opacity: 1;
}
/* # Enquanto o banco nao confirma, o card fica levemente apagado: diz que o
   # movimento ja valeu na tela mas ainda nao foi gravado. */
.agenda-task-pendente{
  opacity: .55;
}
/* # O clone que segue o cursor. */
.ui-draggable-dragging.agenda-task{
  width: 300px;
  opacity: .9;
  cursor: grabbing;
}
/* --- backlog --- */
.agenda-backlog{
  max-height: 560px;
  padding-right: 4px;
}
.agenda-backlog-alvo{
  outline: 2px dashed #2ac1a8;
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- ditado na descricao da tarefa --- */
/* # O microfone vive na barra de formatacao, junto dos tres botoes, e nao mais
   # flutuando sobre o canto do campo: aquele canto virou a alca de arrastar para
   # aumentar a caixa, e os dois disputavam o mesmo lugar. */

/* --- descricao formatada (negrito, sublinhado, lista) --- */
/* # Serve os dois lados: o editor da tarefa aberta e o texto ja gravado, na
   # congelada. Um estilo so para os dois porque e o mesmo conteudo — se
   # divergissem, escrever deixaria de mostrar como vai ficar. */
.agenda-desc{
  line-height: 1.6em;
}
/* # Recuo curto: a descricao vive num modal estreito, e o recuo padrao do
   # navegador (40px) empurraria a lista para o meio da caixa. Sem classe propria
   # porque quem cria estas listas e o execCommand, que so escreve <ul>. */
.agenda-desc ul,
.agenda-desc ol{
  margin: 2px 0;
  padding-left: 18px;
}
.agenda-desc li{
  margin-bottom: 2px;
}
/* # O campo em si.
   #
   # A classe vem junto com .form-control DE PROPOSITO. O s2vips.css e carregado
   # ANTES do bootstrap.css (application_v2/index.php), e `.form-control{height:
   # calc(...)}` tem a mesma especificidade que `.agenda-desc-editor{height:...}`
   # — o bootstrap, sendo o ultimo, ganhava o empate, e a div ficava com a altura
   # de um <input> de uma linha, com o texto vazando para fora da borda. Com as
   # duas classes juntas a regra ganha venha o bootstrap de onde vier.
   #
   # Seis linhas para comecar, rolagem depois disso, e `resize` para arrastar e
   # ver mais — que e o que um textarea faz. O resize so vale com overflow
   # diferente de visible, entao os dois andam juntos. */
.form-control.agenda-desc-editor{
  height: 150px;
  min-height: 96px;
  max-height: none;
  overflow-y: auto;
  resize: vertical;
}
/* # Modo leitura: sai a moldura de campo e fica o texto. Altura livre porque
   # aqui nao ha o que digitar — a caixa de altura fixa existia para reservar
   # espaco de escrita, e mantida ela deixaria um vao embaixo de uma anotacao
   # curta e uma rolagem numa longa que agora cabe inteira.
   #
   # Tres classes no seletor: as duas primeiras ja eram necessarias para vencer
   # o .form-control do bootstrap (carregado depois), e a terceira e o modo. */
.form-control.agenda-desc-editor.lendo{
  height: auto;
  min-height: 0;
  border-color: transparent;
  background-color: transparent;
  resize: none;
  overflow: visible;
  padding-left: 0;
  padding-right: 0;
}
/* # Placeholder na mao: o atributo nao vale para div. O texto sai do
   # data-vazio, entao a traducao continua vindo do PHP e nao daqui. */
.agenda-desc-editor.vazio:before{
  content: attr(data-vazio);
  opacity: .45;
  pointer-events: none;
}
/* # Gravando: o botao vira outline-danger e pulsa. O estado precisa ser
   # obvio — microfone aberto sem querer e o pior desfecho possivel aqui. */
.agenda-ditar-on{
  animation: agenda-pulsa 1s ease-in-out infinite;
}
@keyframes agenda-pulsa{
  0%,100%{ opacity: 1; }
  50%{ opacity: .45; }
}

/* --- conversa da tarefa (agenda) --- */
/* # Historico append-only entre o usuario e a execucao da madrugada. Rola
   # dentro de uma altura fixa: a conversa cresce a cada noite e sem teto ela
   # empurraria os botoes do modal para fora da tela. */
/* # Sem teto de altura: a conversa e o que se le de manha, e rolar dentro de
   # uma caixa dentro de um modal que ja rola e um scroll dentro de outro. O
   # modal cresce e o navegador cuida da rolagem, uma so. */
.agenda-conversa{
  border: 1px solid rgba(129,129,129,.2);
  border-radius: 6px;
  padding: 12px;
  overflow-x: hidden;
}
/* # Cabecalho de sanfona. Nao usa o collapse do Bootstrap porque o modal e
   # carregado por .load() e o data-toggle precisaria de reinicializacao. */
/* # Cabecalho de sanfona: titulo a esquerda, seta a direita — que e onde o olho
   # procura em sanfona. A linha embaixo separa um bloco do outro sem precisar de
   # caixa em volta de cada um. */
.agenda-sanfona{
  cursor: pointer;
  user-select: none;
  padding: 6px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(129,129,129,.18);
}
.agenda-sanfona:hover{
  opacity: .8;
}
.agenda-conversa-item{
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(129,129,129,.15);
}
.agenda-conversa-item:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* # overflow-wrap quebra a palavra longa; min-width:0 permite que o filho de um
   # flex encolha abaixo do proprio conteudo (sem ele, um caminho de arquivo
   # comprido estica o bloco inteiro e estoura a caixa). Foi o que aconteceu com
   # `application_v2/pages_login/embeds/medias_central_store_list_item.php`. */
.agenda-conversa-txt{
  line-height: 155%;
  font-size: 14px;
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
/* # Caminho de arquivo e nome de funcao no meio da frase. Nao rola: quebra,
   # porque a leitura aqui e corrida e um scroll horizontal por linha seria pior
   # que a quebra. */
.agenda-code-inline{
  background-color: rgba(129,129,129,.16);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 12px;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* # Bloco de codigo com o botao de copiar flutuando no canto. O position
   # relative fica aqui e nao no item inteiro: o botao tem que se ancorar no
   # bloco, e nao na entrada da conversa, que pode ter varios. */
.agenda-code{
  position: relative;
  margin: 6px 0;
}
.agenda-code pre{
  background-color: rgba(129,129,129,.14);
  border-radius: 6px;
  padding: 10px 44px 10px 10px;
  margin: 0;
  font-size: 11px;
  line-height: 145%;
  white-space: pre;
  overflow-x: auto;
}
.agenda-copiar{
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 7px;
  line-height: 1.2;
}

/* --- imagem na conversa e na resposta (agenda) --- */
/* # A imagem colada aparece do tamanho que da para ler, e nao do tamanho que
   # veio: captura de tela cheia estouraria a largura do modal. O clique abre a
   # original em outra aba, que e onde se olha detalhe. */
.agenda-conversa-img{
  max-width: 100%;
  max-height: 260px;
  border-radius: 6px;
  display: block;
  margin: 4px 0;
  cursor: zoom-in;
}
/* # O X de tirar fica sobre o canto da miniatura: no fluxo ele empurraria as
   # miniaturas vizinhas e a fila deixaria de ser uma fila. */
.agenda-img-tirar{
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 16px;
  color: #ff4d60;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}

/* --- lista de itens da tarefa (agenda) --- */
/* # Linha fina entre os itens em vez de card por item: sao frases curtas, e uma
   # caixa em volta de cada uma faria uma lista de cinco passos ocupar meia tela
   # de modal. */
.agenda-check-item{
  padding: 7px 0;
  border-bottom: 1px solid rgba(129,129,129,.12);
}
.agenda-check-item:last-child{
  border-bottom: 0;
}
/* # A pega e o unico ponto por onde se arrasta. O texto e editavel, e comecar o
   # arrasto nele impediria de posicionar o cursor para corrigir uma letra. */
.agenda-check-pega{
  cursor: grab;
  font-size: 12px;
  padding: 0 2px;
}
.agenda-check-txt{
  outline: none;
  padding: 2px 4px;
  line-height: 1.4em;
  min-width: 20px;
}
/* # Marcado: risco e meio-apagado. O item continua ali, legivel — a lista serve
   # tambem para lembrar o que ja foi feito. */
.agenda-check-item.feito .agenda-check-txt{
  text-decoration: line-through;
  opacity: .5;
}
/* # As acoes do item sao badges light: olho (segundo plano), robo (automatico)
   # e lixeira. */
.agenda-check-hold,
.agenda-check-robot,
.agenda-check-tirar{
  cursor: pointer;
  flex-shrink: 0;
}
/* # Segundo plano (o olho): o item continua na lista, apagado como um alpha40 e
   # com a caixinha travada, ate passar a valer. As acoes ficam acesas, porque e
   # por elas que ele volta. */
.agenda-check-item.on-hold .custom-control,
.agenda-check-item.on-hold .agenda-check-auto,
.agenda-check-item.on-hold .agenda-check-txt{
  opacity: .4;
}
/* # A caixinha vem do custom-checkbox do tema, e ele nasce com margem de bloco:
   # numa linha em flex isso desalinha a caixa do texto. */
.agenda-check-item .custom-control{
  margin-bottom: 0;
  min-height: 0;
}

/* --- ForYou: primeira assinatura (mini perfil) --- */
/* # Capa em cima, o avatar montado sobre ela e o convite embaixo: e a leitura de
   # um perfil, encolhida num card de coluna. */
.fy-fs-card{
  overflow: hidden;
}
.fy-fs-capa{
  width: 100%;
  height: 110px;
  background-color: rgba(129,129,129,.2);
  background-size: cover;
  background-position: center;
}
/* # A linha do avatar e a mesma do perfil: contagem, avatar, contagem. A margem
   # negativa e o que monta o avatar na capa, e a margem de cima dos numeros os
   # deixa na metade de baixo dele — assim eles nao sobem para a capa junto. */
.fy-fs-perfil{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -52px;
}
.fy-fs-nums{
  width: 62px;
  margin-top: 58px;
  font-size: 12px;
  line-height: 130%;
}
.fy-fs-nums-linha{
  margin: 4px 6px;
  border-top: 1px solid rgba(129,129,129,.25) !important;
}
/* # O avatar quadrado do perfil, com o respiro em volta: e nele que a borda
   # aparece. */
.fy-fs-avatar{
  width: 104px;
  height: 104px;
  flex-shrink: 0;
  padding: 5px;
  border-radius: 20px;
}
.fy-fs-liso{
  background-color: rgba(129,129,129,.35);
}
/* # Stories no ar: o mesmo degrade animado que o perfil usa na borda do avatar.
   # Keyframes proprio porque o do perfil mora num <style> daquela pagina. */
.fy-fs-ring{
  background: linear-gradient(60deg, #3cdcc2, #ffffff, #fe5464);
  background-size: 300% 300%;
  animation: fy_fs_ring 3s ease alternate infinite;
}
@keyframes fy_fs_ring{
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.fy-fs-avatar-img{
  width: 100%;
  height: 100%;
  border-radius: 16px;
  background-size: cover;
  background-position: center;
}

/* --- ForYou: Presenteie! --- */
/* # Dois presentes lado a lado, cada um no seu cartao: o nome em cima, a arte
   # no meio e o botao subindo por cima dela. */
.fy-gs-nome{
  line-height: 120%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* # A arte e a mesma do chat, e o espaco que sobra embaixo dela e o que o
   # botao ocupa ao subir. Sem `overflow:hidden` no cartao: a pulsacao cresce a
   # imagem um pouco, e cortada ela pisca nas bordas. */
.fy-gs-img{
  width: 120px;
  max-width: 100%;
  height: auto;
  margin-top: 4px;
}
/* # A linha do botao sobe por cima da arte: o presente fica atras dele, e o
   # cartao ganha altura de peca em vez de lista. */
.fy-gs-acao{
  margin-top: -20px;
}
/* # O brilho do hover: o degrade ANDA dentro do cartao, saindo do canto de baixo
   # a esquerda para o de cima a direita — do verde da Vips (60%) ao transparente.
   # Quem se move e a posicao do fundo, e nao a camada: camada subindo era outra
   # coisa, e o que se quer e a luz passando por dentro.
   # cartao — o `.dl_mode1` tem o `style` reescrito inteiro na troca de tema, e
   # um fundo posto aqui sumiria no primeiro clique do sol/lua. Assim tambem
   # vale para os dois temas: e a mesma camada por cima da superficie de cada um. */
.fy-gs-item{
  position: relative;
}
.fy-gs-item::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  border-radius: inherit;
  background-image: linear-gradient(to top right, rgba(26,224,191,.6), rgba(26,224,191,0));
  opacity: 0;
  background-size: 220% 220%;
  background-position: 0% 100%;
  transition: opacity .3s ease, background-position .6s ease;
  pointer-events: none;
}
.fy-gs-item:hover::after{
  opacity: 1;
  background-position: 100% 0%;
}
/* # O conteudo acima da camada, senao o degrade cobre o nome e o botao. */
.fy-gs-item > *{
  position: relative;
  z-index: 1;
}

/* --- texto recolhido com "ver mais" (agenda) --- */
/* # Seis linhas e o teto. A altura sai de line-height x 6 e nao de um valor em
   # pixels: assim ela acompanha a fonte do tema em vez de cortar no meio de uma
   # letra quando o tamanho muda. */
.agenda-clamp-txt{
  max-height: 9.6em;
  overflow: hidden;
  line-height: 1.6em;
  font-size: 14px;
}
.agenda-clamp.open .agenda-clamp-txt{
  max-height: none;
}
/* # A sombra avisa que o texto continua embaixo. Some quando aberto, senao
   # ficaria apagando a ultima linha do texto inteiro. */
.agenda-clamp{
  position: relative;
}
.agenda-clamp:not(.open) .agenda-clamp-txt:after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 26px;
  pointer-events: none;
}
.agenda-clamp-bt{
  cursor: pointer;
  padding-top: 4px;
  opacity: .7;
}
.agenda-clamp-bt:hover{
  opacity: 1;
}

/* # Link dentro da conversa da agenda. Quebra em qualquer ponto: as URLs que a
   # madrugada escreve sao longas (caminho de arquivo, query) e sem isso
   # estourariam a largura do modal. */
/* # Sem cor aqui: quem pinta e a classe color3 do projeto, no HTML. Fixar o
   # hex duplicaria a definicao e sairia do padrao. */
.agenda-link{
  word-break: break-all;
}
.agenda-link:hover{
  text-decoration: underline;
}

/* # Espaco entre os botoes do rodape da tarefa. Feito com margem e nao com
   # gap: o tema roda em navegadores onde o gap em flex nao e garantido, e uma
   # margem no filho funciona em qualquer um. O primeiro nao recua. */
.agenda-rodape > .btn{
  margin-left: 6px;
}
.agenda-rodape > .btn:first-child{
  margin-left: 0;
}

/* --- dias anteriores recolhidos (agenda) --- */
/* # Barra discreta, largura inteira, que separa o passado do presente. Nao e
   # um botao de acao: e uma dobra na linha do tempo, e por isso parece uma
   # linha e nao um controle. */
/* # A cor vem da classe color1 no HTML, nao daqui: e a regra do projeto, e
   # fixar o hex duplicaria a definicao. Sem opacidade tambem — a barra agora
   # tem cor propria, e apaga-la brigaria com ela. */
.agenda-abrir-antes{
  cursor: pointer;
  text-align: center;
  padding: 4px 0 8px 0;
  margin-bottom: 6px;
  border-bottom: 1px dashed rgba(129,129,129,.3);
}
.agenda-abrir-antes:hover{
  text-decoration: underline;
}

/* --- controle de acesso (adm_permissions) --- */
.perm-item{
  border-bottom: 1px solid rgba(129,129,129,.15);
  padding: 10px 2px;
}
.perm-item:last-child{
  border-bottom: none;
}
/* # Revogado nao some da lista: some do acesso. Continua visivel, apagado, para
   # que dê para reativar sem precisar lembrar o nome de quem foi removido. */
.perm-revogado{
  opacity: .5;
}
/* # Grupo de tela no modal de permissao: o titulo e a tela, e as abas ficam
   # recuadas embaixo dele. O recuo e a unica coisa que diz "isto pertence
   # aquilo" — sem ele, dezessete telas e quarenta abas viram uma lista so. */
.permedit-grupo{
  padding: 8px 10px;
  border: 1px solid rgba(129,129,129,.2);
  border-radius: 4px;
  height: 100%;
}
.permedit-subs{
  margin-left: 18px;
  margin-top: 4px;
}
.permedit-subs .custom-control{
  margin-bottom: 2px;
}

/* # Resultado da busca de usuario: fica no fluxo, embaixo da barra, e nao
   # flutuando por cima da lista. Como e a barra inteira que serve para
   # conceder, empurrar a lista para baixo enquanto se escolhe alguem nao
   # atrapalha — e evita a caixa flutuante brigar com o z-index do menu. */
.perm-resultados{
  margin-top: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid rgba(129,129,129,.25);
  border-radius: 4px;
}
.perm-resultado{
  border-bottom: 1px dotted rgba(129,129,129,.2);
}
.perm-resultado:last-child{
  border-bottom: none;
}
.perm-resultado:hover{
  background: rgba(129,129,129,.08);
}

/* # Barra do controle de acesso: campo e botoes soltos, com respiro entre
   # eles. Margem no filho e nao gap, como no rodape da agenda — o gap em flex
   # nao e garantido em todos os navegadores que o tema atende. */
.perm-barra > *{
  margin-left: 6px;
}
.perm-barra > *:first-child{
  margin-left: 0;
}

/* --- foryou: catalogo de modulos (adm_foryou/cards) --- */
/* # Mesma linha divisoria do Controle de Acesso: a lista se organiza pelo que
   # separa um item do outro, e uma moldura em volta so criaria uma caixa
   # contendo outras divisorias. */
/* # Cada modulo e um card. O espaco entre eles (mt-1) e o padding interno (p-1)
   # vem das classes do tema no proprio elemento — aqui sobra so o que o tema nao
   # da. A divisoria saiu junto: card ao lado de card ja se separa sozinho. */
/* # Cada modulo e um card. O espaco entre eles (mt-1) e o padding interno (p-1)
   # vem das classes do tema no proprio elemento — aqui so o que o tema nao da.
   # Sem borda: o fundo do card ja o separa do resto, e o projeto nao usa borda
   # em card. */
.fy-item{
  position: relative;
}
/* # A imagem do modulo usa o .avatar do tema, entao nao ha regra propria aqui.
   # O que precisa e so o tamanho: o .avatar dimensiona pelo conteudo, e a lista
   # fica torta se um card tiver imagem de 40px e o vizinho um icone de 32. */
.fy-item .avatar, .fy-item .avatar .avatar-content{
  width: 52px;
  height: 52px;
}
/* # Inativo continua visivel, apagado: e justamente o que se procura quando se
   # abre a lista com "ativos e inativos". */
.fy-item-off{
  opacity: .5;
}
/* # Barra do catalogo: campo e botoes soltos, com respiro. Margem no filho e
   # nao gap, como no resto do projeto. */
.fy_barra > *{
  margin-left: 6px;
}
.fy_barra > *:first-child{
  margin-left: 0;
}

/* --- foryou: montagem do layout (adm_foryou/layouts) --- */
.fyl-item{
  border: 1px solid rgba(129,129,129,.2);
  border-radius: 4px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background-color: rgba(129,129,129,.04);
}
/* # Cursor de mover so na pega: a linha inteira arrastavel impediria de abrir o
   # select de largura que mora dentro dela. */
.fyl-pega{
  cursor: move;
}
/* # O lugar de destino enquanto se arrasta. Tracejado e nao preenchido: o vazio
   # e o que se quer enxergar ali. */
.fyl-itens .ui-sortable-placeholder{
  visibility: visible !important;
  height: 46px;
  margin-bottom: 6px;
  border: 1px dashed rgba(129,129,129,.5);
  border-radius: 4px;
}

/* # Bloco desligado na montagem: continua na lista, para dar como liga-lo de
   # volta, mas apagado. So o icone do olho mudando seria um sinal pequeno demais
   # numa lista de blocos parecidos. A pega e o proprio olho ficam legiveis. */
.fyl-item.fyl-off{
  opacity: .45;
}
.fyl-item.fyl-off .fyl-pega,
.fyl-item.fyl-off .fyl-olho{
  opacity: 1;
}

/* --- foryou: linha de usuario nos formularios de card --- */
/* # Uma linha so, sempre. Antes ela quebrava e o botao de tirar caia sozinho
   # embaixo, parecendo pertencer a linha seguinte.
   #
   # Quem cede espaco e o NOME: ele e o unico pedaco que pode ser cortado sem
   # perder funcao — a data precisa caber inteira para ser lida e o avatar e o X
   # tem tamanho proprio. */
.fy-linha{
  flex-wrap: nowrap;
}
.fy-linha-nome{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* # 140px de base e encolhe se faltar espaco. Abaixo disso o seletor nativo
   # corta o ano ("07/09/2...") — o campo continua funcionando, mas nao da para
   # CONFERIR a data, que e a unica razao de ela estar na tela.
   #
   # Fixo em 150px, como era antes, ele empurrava o botao de remover para fora
   # da linha; encolhendo, ele cede nas larguras apertadas e mantem a linha. */
.fy-linha-data{
  flex: 0 1 140px;
  min-width: 0;
  padding-left: 6px;
  padding-right: 4px;
}

/* # Respiro entre os botoes do rodape, mesma medida do rodape da agenda: eles
   # sao flex-fill e nasciam colados, e dois botoes encostados de consequencias
   # diferentes ("voltar ao padrao" e "aplicar") pedem uma separacao visivel. */
.fy-rodape > .btn{
  margin-left: 8px;
}
.fy-rodape > .btn:first-child{
  margin-left: 0;
}

/* --- foryou: "ver como" do administrador --- */
/* # O dropdown do tema pinta o hover de roxo claro e o texto de primary. Aqui
   # o menu troca de CONTEXTO da pagina inteira, e a cor de destaque ja e usada
   # para marcar o que esta ativo — repetida no hover, os dois estados ficam
   # parecidos e a pessoa nao sabe onde esta. Cinza no fundo, negrito no texto. */
.fy-ver-como .dropdown-item:hover,
.fy-ver-como .dropdown-item:focus,
.fy-ver-como .dropdown-item.active,
.fy-ver-como .dropdown-item:active{
  background-color: rgba(129,129,129,.14);
  color: inherit;
  font-weight: 600;
}

/* --- foryou: pagina montada por layout --- */
/* # Barra da pagina de modulo. Grudada no topo porque a volta tem que estar
   # sempre a um clique: quem desceu tres telas dentro do modulo nao deveria
   # rolar de volta ate o topo so para sair dele. */
.fy2-barra{
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(129,129,129,.15);
}

/* --- foryou: card de destaque --- */
/* # A foto e a parte viva do card: e ela que se olha primeiro e e por ela que
   # se entra no perfil (ou no story). O zoom no hover e o unico sinal de que
   # ela e clicavel — sem ele, uma foto quadrada parece ilustracao. */
/* # A foto tira a altura da PROPRIA largura, e nada mais. Sem isso a altura vem
   # da linha, e a linha e medida pelo texto ao lado (nome, apelido, contagem e
   # botao), que nao cresce — a foto vira uma faixa deitada, e rosto em faixa
   # some.
   #
   # Quadrada porque as fotos aqui sao retratos de gente: qualquer proporcao
   # deitada corta a cabeca. Passou por 2:1, 3:2 e 4:3 antes; em todas sobrava
   # largura e faltava rosto.
   #
   # Vale em TODA largura de tela. Ficou um tempo so do md para cima, na conta de
   # que no celular a foto ja nascia quase quadrada — nao nasce: la o card ocupa a
   # linha inteira e a foto fica com metade dela, deitada do mesmo jeito.
   #
   # Tinha aqui um `min-height:100%` junto, para ela nunca ficar menor que a
   # linha — e era um circulo: a altura da linha vinha da coluna mais alta, e a
   # altura da foto vinha da linha. O navegador desempata isso encolhendo, e foi
   # o que apertou o bloco inteiro. Quem cuida do caso "o texto e mais alto que a
   # foto" e o `align-items:center` da linha: as duas colunas se centram, sem
   # ninguem perguntar a altura de ninguem. */
.fy-hl-card{
  align-items: center;
}
.fy-hl-box{
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
}
@media (min-width: 768px){
}
/* # O Perfil em tamanho normal em QUALQUER tela. Ficou um tempo em `sm` no
   # celular, na conta de que a coluna curta nao aguentaria o tamanho cheio — mas
   # ao lado do botao de chat de 38px o `sm` parecia um irmao menor, e a foto ao
   # lado ja e quadrada e grande.
   #
   # Dois nomes no seletor de proposito: o s2vips.css e carregado ANTES do
   # bootstrap, entao com um so o `.btn-sm` de la ganharia por vir depois. */
.fy-hl-bt.btn-sm{
  padding: 0.786rem 1.5rem;
  font-size: 1rem;
}
/* # Quebra a linha em vez de transbordar: com os dois botoes em tamanho cheio,
   # numa coluna muito estreita (celular pequeno com o card em tres por linha) o
   # par nao cabe lado a lado. Descendo, o card fica alto; transbordando, o
   # circulo sai para fora do cartao. */
.fy-hl-acoes{
  flex-wrap: wrap;
}
/* # Perfil e chat na mesma linha, so onde a montagem liga (fy-hl-inline): a
   # coluna de dados perde o padding da esquerda e a linha de acoes para de
   # quebrar. */
.fy-hl-inline .fy-hl-acoes{
  flex-wrap: nowrap;
}
/* # A moldura animada e a MESMA do perfil, de proposito: e o sinal de "tem
   # story agora", e um sinal que muda de desenho conforme a tela deixa de ser
   # sinal. O gradiente reaproveita o `animatedgradient` que ja existe aqui. */
.fy-hl-box.fy-hl-ring{
  padding: 4px;
  background: linear-gradient(60deg, #3cdcc2, #ffffff, #fe5464);
  background-size: 300% 300%;
  animation: animatedgradient 3s ease alternate infinite;
}
/* # Quem corta. O zoom acontece DENTRO desta caixa: sem o recorte a foto
   # cresceria por cima do texto ao lado e empurraria a linha do card. */
.fy-hl-foto{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 20px;
}
/* # Um pouco menor que a moldura, senao o canto da foto encosta no canto da
   # borda e a faixa colorida some nas quinas. */
.fy-hl-ring .fy-hl-foto{ border-radius: 16px; }
.fy-hl-img{
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
  transition: transform .45s ease;
}
/* # O card inteiro responde junto, e nao cada peca por conta: sao uma coisa so
   # e animar a foto sem o botao deixa metade do card parada debaixo do mouse. */
.fy-hl-card:hover .fy-hl-img{ transform: scale(1.08); }
/* # O botao muda de cor, e nao de lugar: ele fica ao lado de um texto curto e
   # qualquer deslocamento empurra a leitura. Enche de primary: o verde ficou
   # com a badge de online, e as duas na mesma cor dentro do mesmo card fariam
   # "esta online" e "ir ao perfil" parecerem a mesma coisa. */
/* # Os 6px entre as duas acoes. `gap` e nao margem no vizinho: com um botao so
   # na tela (o chat desligado nesta montagem) a margem sobraria de um lado. */
.fy-hl-acoes{
  gap: 6px;
}
/* # O botao de chat e um CIRCULO de 38px, com a medida cravada nos dois eixos.
   #
   # Tentei antes deixar `width:auto` com `aspect-ratio`, contando que a largura
   # viesse da altura do Perfil ao lado. Nao vem: dentro de uma linha flex a
   # largura e resolvida pelo `flex-basis`, que com `auto` vale o conteudo — o
   # icone, 16px. O `aspect-ratio` nunca chegava a valer e sobrava a pilula
   # estreita e alta.
   #
   # `flex: 0 0 38px` e o que fecha a porta: nao cresce, nao encolhe, e a base e a
   # medida. E `align-self:center` para o `align-items:stretch` da linha nao
   # esticar de novo a altura.
   #
   # `!important` no padding e no raio porque o `.btn-sm.btn-icon` do
   # bootstrap-extended e o `.btn-sm` do bootstrap carregam DEPOIS deste arquivo:
   # em empate de especificidade quem vem depois ganha. */
.fy-hl-chat{
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  align-self: center;
  font-size: 1rem;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* # O grupo do Perfil (brilho + botao + brilho) e UM item da linha de acoes: o
   # `gap` da linha separa ele do chat, e por dentro os gifs ficam colados no
   # botao. */
.fy-hl-perfil{
  min-width: 0;
}
.fy-hl-bt{
  transition: background-color .35s ease, border-color .35s ease, color .35s ease;
}
/* # O Perfil acende so no que LEVA ao perfil: o proprio grupo dele (botao e
   # brilho) e a foto. Estava no hover do card inteiro, entao passar o mouse no
   # botao de chat — que leva a outro lugar — pintava o Perfil de vermelho,
   # prometendo um destino que aquele clique nao tem.
   #
   # O gatilho e o GRUPO e nao so o botao: com o mouse sobre o gif ao lado, o
   # brilho trocaria de cor e o botao ficaria cinza, cada um contando uma
   # historia.
   #
   # A foto mora na outra coluna, entao nao ha irmao a alcancar: quem faz a ponte
   # e o `:has()`, perguntando a linha se a foto esta sob o mouse. */
.fy-hl-perfil:hover .fy-hl-bt,
.fy-hl-card:has(.fy-hl-box:hover) .fy-hl-bt{
  background-color: #ff4d60 !important;
  border-color: #ff4d60 !important;
  color: #fff !important;
}
/* # O brilho troca junto com o botao: cinza no vazado, rosa no aceso. Os dois
   # pares estao no HTML e so um aparece — assim a troca e instantanea, sem ir
   # buscar imagem no meio do gesto. */
.fy-hl-glam-on{ display: none; }
.fy-hl-perfil:hover .fy-hl-glam-off,
.fy-hl-card:has(.fy-hl-box:hover) .fy-hl-glam-off{ display: none; }
.fy-hl-perfil:hover .fy-hl-glam-on,
.fy-hl-card:has(.fy-hl-box:hover) .fy-hl-glam-on{ display: inline-block; }
/* # A badge fica DENTRO do recorte, encostada no canto de baixo. Presa ao
   # thumb e nao a foto: a foto cresce no hover, e junto dela a badge cresceria
   # e escorregaria para fora. */
.fy-hl-online{
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 2;
  /* # Minusculo pelo CSS e nao no texto: a chave do lang() continua sendo
     # "Online", entao a traducao dos outros idiomas segue achando a frase. */
  text-transform: lowercase;
}

/* --- foryou: bloco de midias --- */
/* # A janela recorta e o trilho anda. As cinco estao SEMPRE no HTML — quem
   # esconde e o recorte, e nao o JS —, entao o carrossel nao busca nada de novo
   # a cada volta e no PC, onde as cinco cabem, ele simplesmente nao se move. */
.fy-md-janela{
  width: 100%;
  overflow: hidden;
  /* # O respiro que a subida do hover precisa. A janela corta o que passa dela
     # (e o que segura o carrossel na linha), e com as miniaturas encostadas no
     # topo os 5px da subida saiam cortados. O `padding` abre o espaco por
     # dentro, entao ele acompanha o corte em vez de brigar com ele. */
  padding-top: 8px;
  /* # `pan-y` deixa a pagina rolar na vertical e entrega o horizontal ao
     # arrasto do carrossel. Sem isto o navegador fica com os dois e o gesto
     # lateral vira rolagem da pagina. */
  touch-action: pan-y;
  /* # Arrastar sobre imagens seleciona texto e "pega" a figura no desktop; as
     # duas coisas atrapalham o gesto. */
  user-select: none;
  -webkit-user-select: none;
}
.fy-md-janela img,
.fy-md-thumb{
  -webkit-user-drag: none;
}
.fy-md-trilho{
  display: flex;
  transition: transform .5s ease;
}
/* # Uma no celular, tres no tamanho medio, cinco no PC. O `calc` desconta o
   # espaco entre elas, senao a ultima de cada linha sai da janela.
   #
   # Cinco nao divide 12, entao a grade do bootstrap nao serve aqui — por isso a
   # largura vem em porcentagem e nao em `col-`. */
.fy-md-item{
  flex: 0 0 100%;
  max-width: 100%;
  padding-right: 8px;
}
@media (min-width: 768px){
  .fy-md-item{ flex: 0 0 33.3333%; max-width: 33.3333%; }
}
@media (min-width: 1200px){
  .fy-md-item{ flex: 0 0 20%; max-width: 20%; }
}
/* # Formato de story: em pe, quase o dobro de alto que largo. E o mesmo 1.7 que
   # o `.thumb_stories` usa por JS no resto do app — aqui nasce do CSS, antes de
   # qualquer script rodar. */
.fy-md-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.7;
  border-radius: 16px;
  overflow: hidden;
  background-color: rgba(129,129,129,.15);
  /* # Sobe alguns pixels com o mouse em cima e volta ao sair. Poucos de
     # proposito: e um aceno de que a peca responde, e nao um salto — cinco
     # delas lado a lado saltando seria a linha inteira se mexendo. */
  transform: translateY(0);
  transition: transform .35s ease;
}
/* # A imagem, por dentro da moldura. Mesmo gesto do avatar em Destaques
   # (`.fy-hl-img`): cresce um pouco e volta, com a moldura parada — o corte
   # arredondado e o `overflow` ficam com ela. */
.fy-md-img{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .45s ease;
}
.fy-md-item:hover .fy-md-thumb{ transform: translateY(-5px); }
.fy-md-item:hover .fy-md-img{ transform: scale(1.08); }
/* # Quem chega pelo toque nao tem "sair de cima": o estado de hover gruda e a
   # peca fica levantada ate alguem tocar noutra. */
@media (hover: none){
  .fy-md-item:hover .fy-md-thumb{ transform: translateY(0); }
  .fy-md-item:hover .fy-md-img{ transform: scale(1); }
}
/* # A linha do autor, embaixo da miniatura. `min-width:0` mais o corte do nome
   # porque em cinco por linha a coluna e estreita e um @ comprido empurraria a
   # miniatura vizinha. */
.fy-md-autor{
  margin-top: 6px;
  min-width: 0;
}
.fy-md-autor b{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* # O triangulo do video, no meio. Sem ele foto e video se parecem quando
   # cortados em pe, e so ao abrir se descobriria qual e qual. */
.fy-md-play{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
/* # Coracao e balao no rodape da miniatura, sobre um degrade. Sobre foto clara
   # o texto branco sumiria; o degrade da o contraste sem escurecer a imagem
   # inteira. */
/* # A camada de abrir cobre a miniatura inteira e fica POR BAIXO do rodape de
   # engajamento. Assim o coracao e o balao ficam com o proprio clique — dentro
   # da area de abrir, curtir abriria o lightbox junto. */
.fy-md-abrir{
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1;
}
.fy-md-engage{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 10px 8px 10px;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
}
/* # O componente de curtida vem com as cores do tema claro. Aqui ele fica sobre
   # a foto, entao o texto herda o branco do rodape. */
.fy-md-engage,
.fy-md-engage *{
  color: #fff;
}

/* --- foryou: as midias escolhidas, na montagem --- */
.fym-item{
  position: relative;
  width: 64px;
  margin: 0 6px 6px 0;
}
.fym-thumb{
  width: 64px;
  height: 92px;
  border-radius: 10px;
  background-color: rgba(129,129,129,.15);
  background-size: cover;
  background-position: center center;
  display: flex; align-items: center; justify-content: center;
}
/* # Id que nao respondeu: nao existe, nao e publico, ou o post saiu do ar.
   # Continua na tela, marcado — sumindo sozinho ninguem entenderia por que o
   # bloco mostra menos do que devia. */
.fym-falta{
  color: #ff4d60;
  border: 1px dashed rgba(255,77,96,.5);
}
.fym-id{
  font-size: 9px;
  opacity: .6;
  text-align: center;
}
.fym-item .fym-del{
  position: absolute;
  top: -6px; right: -6px;
  padding: 2px 5px !important;
  line-height: 1;
}

/* --- foryou: as midias, no modal --- */
.fvm-midia{
  max-width: 100%;
  max-height: 60vh;
  border-radius: 16px;
}

/* --- postagem: os ids de midia, para o admin copiar --- */
/* # Miniatura a esquerda, id a direita, dentro de uma badge. Bem pequena de
   # proposito: e ferramenta de bastidor no meio de um menu de acoes, e no
   # tamanho de uma miniatura de verdade competiria com elas. */
.post-mid-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 4px 4px 0;
  padding: 3px 8px 3px 3px;
}
.post-mid-badge img{
  width: 22px;
  height: 22px;
  border-radius: 5px;
  object-fit: cover;
}

/* --- foryou: botao de acao --- */
/* # No tamanho Grande, so o CORPO do botao cresce; a letra fica perto do normal.
   # O `btn-lg` do bootstrap sobe a fonte para 1.25rem, e num botao que ocupa a
   # largura toda do bloco isso vira uma manchete — o botao passa a competir com
   # o titulo em vez de responder a ele.
   #
   # Dois nomes no seletor porque o s2vips.css carrega ANTES do bootstrap: com um
   # so, o `.btn-lg` de la ganharia por vir depois. */
.fy-bt-acao.btn-lg{
  font-size: 1.05rem;
}

/* --- foryou: card de incentivo a criar carteira --- */
/* # A sombra mora na CLASSE, nunca no `style`. A troca de tema (s2_app.js)
   # reescreve o atributo `style` INTEIRO de todo .dl_mode1 para rodar a animacao
   # de cor — sombra inline sumiria no primeiro clique do sol/lua e so voltaria
   # recarregando a pagina.
   #
   # Sem sombra: nenhuma das versoes ficou boa aqui.
   #
   # Fica um fio cinza no lugar. Nao e enfeite — no modo claro o fundo do card e
   # o da pagina sao os DOIS `#ffffff` (screenmode.php), entao sem alguma
   # separacao o card simplesmente nao existe na tela. Cinza translucido, e nao
   # branco: assim o mesmo fio serve nos dois modos. */
.fy-cta-card{
  border: 1px solid rgba(129,129,129,.18);
  transition: background-color .3s ease, color .3s ease;
}
/* # As duas superficies. Os tons sao os MESMOS do tema (screenmode.php): o
   # escuro e o `1f1f23` de card no modo noturno, o claro e o `ffffff` do diurno
   # — so que trocados de lugar. Inventar um cinza proprio aqui faria o card
   # parecer de outro site.
   #
   # A cor do texto vem junto, e nao e detalhe: fundo invertido sem texto
   # invertido e um card ilegivel. Os <b class='color1'/'color2'> de dentro
   # seguem com a cor deles, que funciona nos dois fundos. */
.fy-cta-escuro{
  background-color: #1f1f23;
  color: #ffffff;
}
.fy-cta-claro{
  background-color: #ffffff;
  color: #6E6B7B;
}
.fy-cta-img{
  width: 100%;
  max-width: 260px;
}
/* # O involucro encolhe ate a arte (`inline-block` com o mesmo teto), e e ele
   # que serve de referencia para os satelites. Preso a coluna, que e larga, eles
   # orbitariam o vazio ao lado da ilustracao. */
.fy-cta-arte{
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 260px;
}
/* # `pointer-events:none` porque sao enfeite: passando por cima do botao ou do
   # texto, nao podem roubar o clique de ninguem. */
.fy-cta-orb{
  position: absolute;
  pointer-events: none;
}
/* # Tamanhos e posicoes em %, para acompanharem a arte quando o bloco estreita.
   # Duracoes propositalmente quebradas (7s / 5.5s / 8s): iguais, os tres
   # passariam pelo mesmo ponto do ciclo ao mesmo tempo e o conjunto pulsaria
   # junto, que e o oposto de orbitar. */
.fy-cta-orb-pique{
  width: 15%;
  left: -3%;
  top: 24%;
  animation: fy-orb-1 7s ease-in-out infinite;
}
.fy-cta-orb-estrela{
  width: 9%;
  right: 4%;
  top: 48%;
  animation: fy-orb-2 5.5s ease-in-out infinite;
}
.fy-cta-orb-filme{
  width: 21%;
  right: -4%;
  bottom: 8%;
  animation: fy-orb-3 8s ease-in-out infinite;
}
/* # Quatro paradas fazem um caminho fechado — sobe, atravessa, desce, volta.
   # Com duas paradas so, o movimento seria um vaivem em linha reta. */
@keyframes fy-orb-1{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%{ transform: translate(6px,-7px) rotate(6deg); }
  50%{ transform: translate(0,-13px) rotate(0deg); }
  75%{ transform: translate(-6px,-7px) rotate(-6deg); }
}
@keyframes fy-orb-2{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%{ transform: translate(-7px,5px) rotate(-14deg); }
  50%{ transform: translate(0,10px) rotate(0deg); }
  75%{ transform: translate(7px,5px) rotate(14deg); }
}
@keyframes fy-orb-3{
  0%,100%{ transform: translate(0,0) rotate(0deg); }
  25%{ transform: translate(7px,6px) rotate(-5deg); }
  50%{ transform: translate(0,12px) rotate(0deg); }
  75%{ transform: translate(-7px,6px) rotate(5deg); }
}
/* # Quem pediu menos animacao no sistema ve a arte parada — os satelites
   # continuam no lugar, so nao andam. Mesma regra do titulo, que nem se monta. */
@media (prefers-reduced-motion: reduce){
  .fy-cta-orb{ animation: none !important; }
}
.fy-cta-titulo{
  font-size: 22px;
  line-height: 130%;
}

.fy-cta-texto{
  line-height: 170%;
}
/* # O gif do titulo acende quando a frase acaba de se montar (quem apaga e
   # reacende e o script do bloco). A transicao existe so para ele nao aparecer
   # de estalo depois de 1,5s de texto se formando devagar. */
.fy-cta-selo-img{
  transition: opacity .4s ease;
}
/* # Empilhado: arte em cima, texto embaixo. Acontece em duas situacoes — bloco
   # estreito no layout (a classe `fy-cta-stack`, que o PHP poe) e celular (o
   # media query). As duas querem o mesmo desenho, entao as duas apontam para
   # estas mesmas tres linhas em vez de cada uma ter a sua.
   #
   # Os 20px sao no rodape da coluna da ARTE, e nao no topo do texto: assim o
   # respiro nasce junto com o empilhamento e some quando as duas voltam a ficar
   # lado a lado, sem precisar de uma regra que o desfaca. */
.fy-cta-stack .fy-cta-imgcol{ margin-bottom: 20px; }
.fy-cta-stack .fy-cta-dados{ text-align: center; }
.fy-cta-stack .fy-cta-acao{ justify-content: center; }
@media (max-width: 767.98px){
  .fy-cta-imgcol{ margin-bottom: 20px; }
  .fy-cta-dados{ text-align: center; }
  .fy-cta-acao{ justify-content: center; }
}

/* --- agenda: passos do "como testar" --- */
/* # Um passo por linha, com o numero na frente e uma divisoria fina entre eles:
   # a receita e para ser seguida na ordem, e sem separacao vira paragrafo unico
   # em que se perde o lugar. */
.agenda-passo{
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid rgba(129,129,129,.15);
}
.agenda-passo:last-child{
  border-bottom: none;
}
.agenda-passo-n{
  flex-shrink: 0;
  min-width: 20px;
  font-size: 11px;
  font-weight: 600;
  opacity: .5;
  padding-top: 2px;
}
/* # min-width:0 permite o filho do flex encolher abaixo do proprio conteudo —
   # sem ele um caminho de arquivo longo estica a caixa inteira. */
.agenda-passo-txt{
  min-width: 0;
  overflow-wrap: anywhere;
}
/* # Cor explicita nos dois: sem ela o passo herda o que o ancestral der, e num
   # modal cheio de badge e titulo colorido isso nao e previsivel. O texto do
   # roteiro e texto comum — quem tem cor propria ali e so o link. */
.agenda-passo-txt, .agenda-passo-n{
  color: inherit;
}
.agenda-passos{
  color: #b4b7bd;
}
body:not(.dark-layout) .agenda-passos{
  color: #6e6b7b;
}

/* --- foryou: divisoria de secao no modal do modulo --- */
/* # Linha com o rotulo no meio, separando o cadastro (interno) do que o
   # visitante le. Sem o rotulo seria so um risco, e o risco sozinho nao diz o
   # que muda de um lado para o outro. */
.fymod-sep{
  display: flex;
  align-items: center;
  gap: 8px;
}
.fymod-sep:before, .fymod-sep:after{
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgba(129,129,129,.22);
}
.fymod-sep span{
  font-size: 10px;
  opacity: .6;
  white-space: nowrap;
}

/* ---------------------------------------------------
   NOTICIA: a tela da materia
   --------------------------------------------------- */
/* # A capa segura a tarja e o engajamento por cima dela. `overflow` para o
   # canto arredondado valer tambem para a imagem. */
.nw-pg-capa{
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  line-height: 0;
}
.nw-pg-capa img{ width: 100%; height: auto; }
/* # A tarja da vitrine tem 260px de altura fixa; aqui ela so precisa proteger a
   # linha de botoes, entao acompanha o que ha embaixo. */
.nw-pg-capa .campaigns_banner{ height: 120px; }
/* # Acima da tarja: o `.campaigns_banner` tem `z-index:1`, e como aqui os dois
   # sao IRMAOS (na vitrine as acoes ficam dentro dele), sem isto o degrade
   # pintava por cima dos botoes. */
.nw-pg-acoes{ line-height: normal; z-index: 2; }
/* # Os contadores sobre a arte: brancos, como na vitrine. O do curtir vem do
   # componente do app sem cor propria (so a variante "giant" traz o branco
   # cravado), entao ele herda daqui — os coracoes sao imagem e nao mudam. */
.nw-pg-acoes .nw-pg-com{ color: #fff; }
.nw-pg-acoes .like{ color: #fff; }
/* # Miniatura quadrada. O `thumb_box` que vem junto na classe traz o fundo e o
   # spinner — aqui ficam so a forma e o corte. */
.nw-md-thumb{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
/* # A imagem por dentro, como no card de Midias: cresce e volta com a moldura
   # parada. O `background-size` vem daqui e nao do thumb_box, que usa 20px para
   # o spinner. */
.nw-md-img{
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .45s ease;
}
.nw-md-item:hover .nw-md-img{ transform: scale(1.06); }
/* # Quem chega pelo toque nao tem "sair de cima": o hover gruda e a peca fica
   # crescida ate alguem tocar noutra. */
@media (hover: none){
  .nw-md-item:hover .nw-md-img{ transform: scale(1); }
}
.nw-md-play{
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin-top: -19px;
  text-align: center;
  font-size: 38px;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}

/* ---------------------------------------------------
   FORYOU: cartaz de noticia
   --------------------------------------------------- */
/* # O escurecimento acompanha a IMAGEM, e nao o texto: vai de quase preto no
   # rodape a transparente no topo do cartaz. Assim o titulo continua legivel
   # sobre qualquer banner e a altura da tarja nao muda quando a chamada e
   # desligada na montagem. */
/* # A foto cresce um pouco no hover, com a moldura parada — a mesma conta do
   # card de Destaques (scale 1.08 em .45s), para as duas pecas do ForYou
   # responderem igual ao mouse. Por isso a arte mora numa camada propria: no
   # fundo do cartaz, o zoom levaria a tarja e o texto junto. */
.fy-nwd-img{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: scale(1);
  transition: transform .45s ease;
}
.fy-nwd-card:hover .fy-nwd-img{ transform: scale(1.08); }
.fy-nwd-veu{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,0) 100%);
  /* # O clique e do cartaz inteiro, que abre a noticia. O veu esta por cima da
     # imagem e engoliria esse clique sem esta linha. */
  pointer-events: none;
}
.fy-nwd-texto{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
}

/* ---------------------------------------------------
   NOTICIA: versao melhorada por IA
   ---------------------------------------------------
   # As unicas pecas que a rotina das 5h usa para montar o texto melhorado
   # (documentation/news_ia_workflow.md). O desenho mora aqui, e nao em style=""
   # no HTML: a lista branca do salva tira qualquer style, e mudar o visual de
   # todas as noticias vira mexer num lugar so. */
/* # O container do texto: fecha o que a imagem lateral deixou flutuando. */
.nw-ia-texto::after{ content: ""; display: block; clear: both; }
.nw-ia-lead{
  font-size: 18px;
  line-height: 150%;
  font-weight: 600;
  margin-bottom: 16px;
}
/* # Titulo de secao curto e grande, com a linha embaixo — verde (color2) por
   # padrao, vermelha (color1) ou azul (color3) quando pedida. */
.nw-ia-h{
  position: relative;
  font-size: 22px;
  font-weight: 700;
  line-height: 125%;
  margin: 28px 0 12px 0;
  padding-bottom: 10px;
}
.nw-ia-h::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 4px;
  border-radius: 4px;
  background-color: #2ac1a8;
}
.nw-ia-h.nw-ia-c1::after{ background-color: #ff4d60; }
.nw-ia-h.nw-ia-c3::after{ background-color: #2aa2dc; }
/* # A imagem no meio do texto. O fundo cinza e a altura minima seguram o lugar
   # enquanto o endereco nao chega — ele e resolvido por JS, pelo id do item. */
.nw-ia-fig{ margin: 20px 0; }
.nw-ia-fig img{
  display: block;
  width: 100%;
  height: auto;
  min-height: 120px;
  border-radius: 16px;
  background-color: rgba(129,129,129,.12);
}
.nw-ia-cap{ font-size: 12px; opacity: .6; margin-top: 6px; }
/* # Retrato ao lado do texto so a partir do tablet: no celular a coluna e
   # estreita demais para dividir, e a imagem ocupa a largura toda. O texto
   # contorna a imagem com 20px de respiro, e o que vem depois dela sobe para o
   # lado em vez de esperar a imagem acabar. Cada imagem lateral comeca abaixo
   # da anterior, para duas nunca ficarem lado a lado. */
@media (min-width: 768px){
  .nw-ia-fig.nw-ia-meia{ width: 46%; clear: both; }
  .nw-ia-fig.nw-ia-dir{ float: right; margin: 0 0 20px 20px; }
  .nw-ia-fig.nw-ia-esq{ float: left; margin: 0 20px 20px 0; }
}
/* # O que tem fundo, borda ou linha propria fica ao lado da imagem, e nao por
   # baixo dela: sem isso o fundo da caixa e a linha do titulo corriam por tras
   # da imagem flutuando. */
.nw-ia-h, .nw-ia-box, .nw-ia-quote{ display: flow-root; }
/* # A imagem na largura toda e a vitrine de presentes precisam da linha inteira. */
.nw-ia-fig:not(.nw-ia-meia), .nw-ia-presentes{ clear: both; }
/* # A quebra que a rotina punha depois do paragrafo da imagem lateral era o que
   # abria o buraco: empurrava a secao seguinte para baixo da imagem. Ela
   # continua nas noticias ja escritas, agora sem efeito. */
.nw-ia-limpa{ clear: none; }
/* # A caixa de mencao: fundo levemente tingido e a barra da cor na esquerda.
   # Borda e fundo, e nunca sombra colorida. */
.nw-ia-box{
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: 16px;
  border-left: 4px solid #2ac1a8;
  background-color: rgba(42,193,168,.08);
}
.nw-ia-box.nw-ia-c1{ border-left-color: #ff4d60; background-color: rgba(255,77,96,.07); }
.nw-ia-box.nw-ia-c3{ border-left-color: #2aa2dc; background-color: rgba(42,162,220,.08); }
.nw-ia-quote{
  margin: 24px 0;
  padding-left: 16px;
  border-left: 4px solid #ff4d60;
  font-size: 20px;
  font-weight: 600;
  line-height: 140%;
}
.nw-ia-ref{
  font-weight: 600;
  color: #2aa2dc;
  text-decoration: underline;
  cursor: pointer;
}

/* # A vitrine de presentes (`nw-ia-presentes`): o marcador vazio no texto vira
   # 6 presentes sorteados a cada carga, desenhados pelo embed da noticia. Tres
   # por linha no celular, seis no computador. Sem lightbox: e ilustracao. */
.nw-ia-presentes{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
@media (min-width: 768px){
  .nw-ia-presentes{ grid-template-columns: repeat(6, 1fr); }
}
.nw-ia-presente{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 10px;
  border-radius: 16px;
  overflow: hidden;
  background-color: rgba(129,129,129,.08);
}
.nw-ia-presente img{
  max-width: 100%;
  max-height: 100%;
  transform: scale(1);
  transition: transform .45s ease;
}
.nw-ia-presente:hover img{ transform: scale(1.08); }
@media (hover: none){
  .nw-ia-presente:hover img{ transform: scale(1); }
}

/* # O balao com o nome do presente: segue o mouse (posicao por JS) e some com
   # fadeOut ao sair — a transicao de saida e mais longa e com ease-out, para o
   # sumico ser suave e a entrada, rapida. pointer-events:none para ele nunca
   # ficar entre o mouse e o presente. */
.nw-ia-dica{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 10px;
  background-color: rgba(26,26,28,.92);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translate(14px, 16px);
  transition: opacity .3s ease-out;
}
.nw-ia-dica.nw-ia-dica-on{
  opacity: 1;
  transition: opacity .15s ease-in;
}
/* # Tela de toque: o hover gruda, e o balao ficaria parado no meio da tela. */
@media (hover: none){
  .nw-ia-dica{ display: none; }
}

/* --- roleta dentro do post (embeds/spin.php) --- */
/* # Mesma mecanica da pagina /g, em tamanho de card: a capa ao fundo, a roda por
   # cima dela e o botao logo abaixo. As medidas de dentro da roda saem da largura
   # do proprio circulo (`cqw`), entao ela nao muda de proporcao no celular. */
.spinb{ position:relative; overflow:hidden; padding:0 20px; }
/* # Mesmo cabecalho das paginas do painel: traco verde no titulo, texto a esquerda. */
.spinb_head{ padding:12px 0 10px 0; border-left:2px solid #2ac1a8; padding-left:12px; margin-bottom:10px; }
/* # As duas artes: a de divulgacao e a capa que a pessoa ve. Quadradas, lado a
   # lado, com a roda entrando 40% dela para dentro. */
/* # Quadradas, com teto de altura: em tela larga elas parariam de crescer e o
   # bloco viraria um painel gigante dentro do card. */
.spinb_arts{ display:grid; grid-template-columns:1fr 1fr; border-radius:14px; overflow:hidden; }
.spinb_art{ position:relative; width:100%; padding-top:100%; overflow:hidden; background-color:rgba(129,129,129,.2); background-size:cover; background-position:center; background-repeat:no-repeat; }
.spinb_art video{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; object-position:top center; }
.spinb_game{ position:relative; z-index:2; padding:0; text-align:center; }
/* # A roda entra 40% dela para dentro das artes (40% de 83% = 33.2%). */
.spinb_wheel_area{ position:relative; container-type:inline-size; width:83%; aspect-ratio:1 / 1; margin:-33.2% auto 0 auto; }
.spinb_wheel{ width:100%; height:100%; border-radius:50%; border:6px solid #fff; box-shadow:0 8px 20px rgba(0,0,0,.22); position:relative; will-change:transform; }
.spinb_slice{ position:absolute; top:0; right:0; bottom:0; left:0; }
.spinb_slice_in{ position:absolute; top:7%; left:50%; transform:translateX(-50%); text-align:center; color:#5e5873; line-height:1.1; }
.spinb_slice_in b{ display:block; font-size:9cqw; }
.spinb_slice_in i{ font-size:7cqw; }
.spinb_marker{ position:absolute; top:-8px; left:50%; transform:translateX(-50%); width:22px; height:25px; background-size:contain; background-repeat:no-repeat; background-position:center; z-index:3; }
.spinb_center{ position:absolute; top:50%; left:50%; width:24%; height:24%; transform:translate(-50%,-50%); border-radius:50%; border:3px solid #fff; background-color:#fff; background-size:cover; background-position:center; z-index:3; }
.spinb_credits{ position:absolute; right:-6px; bottom:4%; z-index:4; background-color:#2ac1a8; color:#fff; font-weight:800; border-radius:20px; padding:3px 9px; font-size:12px; }
/* # O botao sobe metade da altura dele sobre a roda. */
.spinb_actions{ position:relative; z-index:4; margin-top:-42px; }
.spinb_title{ font-size:16px; line-height:120%; }
.spinb_bt{ min-width:150px; font-weight:800; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:manipulation; }
.spinb_hint{ margin-top:6px; opacity:.75; min-height:14px; }
.spinb_force{ height:8px; width:150px; max-width:70%; margin:0 auto 8px auto; border-radius:8px; background-color:rgba(129,129,129,.2); overflow:hidden; visibility:hidden; }
.spinb_force.on{ visibility:visible; }
.spinb_force_bar{ height:100%; width:0; background:linear-gradient(90deg,#2ac1a8,#ff4d60); }
/* # No PC as duas artes empilham a esquerda e a roda fica na coluna da direita,
   # entrando por cima delas com margem negativa. Ela sai bem menor que no
   # celular (60% do tamanho), porque divide a largura do card em vez de ocupar
   # tudo. */
@media (min-width:768px){
	.spinb_layout{ display:grid; grid-template-columns:4fr 8fr; align-items:center; }
	.spinb_arts{ grid-template-columns:1fr; }
	.spinb_game{ min-width:0; margin-left:-8%; }
	.spinb_game .spinb_wheel_area{ width:70%; margin:0 auto; }
}

/* --- roleta: album e ranking (pagina /g e modal de recompensas) --- */
/* # Ficavam so no <style> da pagina do jogo, e por isso o modal de
   # recompensas (que abre dentro do app, pelo card da timeline) vinha sem
   # desenho nenhum. O lugar delas e aqui, onde as duas telas enxergam. */
.gspin_page{ margin-top:20px; margin-bottom:16px; }
.gspin_page_title{ font-size:24px; font-weight:bold; line-height:105%; border-left:4px solid #2ac1a8; padding-left:12px; margin-bottom:6px; }
.gspin_page_desc{ font-size:13px; line-height:140%; }
/* # Sem titulo em cima (o modal), a descricao nao precisa do respiro dele. */
.modal .gspin_page_desc{ margin-top:0; }
.gspin_fig{ height:100%; padding:10px; border-radius:16px; border:1px solid rgba(129,129,129,.2); }
.gspin_fig.highlight{ border:2px solid #2ac1a8; background-color:rgba(42,193,168,.07); }
.gspin_fig_grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:6px; }
.gspin_fig_mini{ position:relative; padding-top:100%; border-radius:10px; overflow:hidden; background-color:rgba(129,129,129,.15); }
.gspin_fig_mini img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform .45s ease; }
/* # Passar o mouse aproxima a foto dentro da moldura, como nos cartoes do ForYou.
   # So no album da roleta: a mesma classe aparece no cartao do ForYou, que ja tem
   # a animacao dele. */
.gspin_fig_grid .gspin_fig_mini:hover img{ transform:scale(1.08); }
/* # O @ da criadora leva ao perfil dela. No hover escurece o proprio color2 (15%
   # menos claro), em vez de trocar de cor: e a mesma informacao, so acesa. */
.gspin_user:hover{ color:#24a48f; }
.gspin_fig_mini i{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.5); }
/* # Dois seletores de propriedade: o `s2vips.css` e carregado ANTES do
   # bootstrap, entao `.badge` ganharia da etiqueta e ela voltaria ao tamanho
   # de badge normal. */
.gspin_fig_mini span.gspin_fig_tag{ position:absolute; left:3px; bottom:3px; font-size:11px; font-weight:bold; padding:2px 5px; line-height:1; }
/* # No celular a miniatura e bem menor, e a etiqueta precisa encolher junto
   # para caber dentro dela. */
@media (max-width:767px){
	.gspin_fig_mini span.gspin_fig_tag{ font-size:8px; padding:2px 4px; }
}
/* # Dentro de modal o titulo da pagina entra menor: a caixa e mais estreita.
   # E sem o respiro de cima, que ali ja e o do proprio modal. */
.modal .gspin_page_title{ font-size:20px; }
.modal .gspin_page{ margin-top:0; }
.gspin_fig_more{ font-weight:800; }
.gspin_fig_more:before{ content:""; }
.gspin_fig_special{ padding:16px; border-radius:10px; background-color:rgba(129,129,129,.1); text-align:center; font-weight:bold; }
.gspin_fig_special i{ font-size:22px; margin-right:6px; color:#ff4d60; }
.gspin_rk_me{ border-color:#2ac1a8 !important; background-color:rgba(42,193,168,.07); }
.gspin_other{ display:flex; align-items:center; padding:8px; margin-bottom:8px; border:1px solid rgba(129,129,129,.2); border-radius:10px; color:inherit; }
.gspin_other:hover{ border-color:#2ac1a8; color:inherit; }
.gspin_other_cover{ width:54px; height:54px; flex-shrink:0; margin-right:10px; border-radius:8px; background-color:rgba(129,129,129,.15); background-size:cover; background-position:center; }
.gspin_other_txt{ min-width:0; margin-right:auto; }

/* --- ForYou: destaques de roleta --- */
/* # O cartao de roleta do ForYou: arredondado (b20 no HTML) e com 20px de
   # respiro por dentro. O thumb quadrado fica na esquerda (mr-1), com o loader
   # atras enquanto a arte chega; o texto e o Jogar ocupam o resto, com o botao
   # descendo ate a base do thumb. */
.fysh_card{ padding:20px; }
.fysh_card_main{ display:flex; }
.fysh_card_art{ position:relative; flex:0 0 120px; width:120px; height:120px; align-self:flex-start; overflow:hidden; background-color:rgba(30,30,30,.1); background-size:20px; background-repeat:no-repeat; background-position:center; }
.fysh_card_art_img{ position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-position:center; transform:scale(1); transition:transform .45s ease; }
/* # A arte cresce um pouco no hover, com a moldura parada: a mesma conta do card
   # de Destaques e do cartaz de noticia (scale 1.08 em .45s), para as pecas do
   # ForYou responderem igual ao mouse. O recorte ja vem do `overflow:hidden` da
   # moldura, entao o zoom nao vaza pelos cantos. */
.fysh_card:hover .fysh_card_art_img{ transform:scale(1.08); }
/* # A moldura da roleta por cima da arte (spin_overlay.png, quadrada como o
   # thumb). Nao pega o toque: e enfeite, e o que esta embaixo segue igual. */
.fysh_card_overlay{ position:absolute; top:0; right:0; bottom:0; left:0; background-size:cover; background-position:center; background-repeat:no-repeat; pointer-events:none; }
.fysh_card_info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:120px; }
/* # A fileira de premios trancados embaixo: quatro quadrados (col-3) com o
   # respiro apertado, para caberem inteiros lado a lado. */
.fysh_card_prizes{ margin-left:-4px; margin-right:-4px; }
.fysh_card_prizes > .col-3{ padding-left:4px; padding-right:4px; }
/* # Cada premio e um atalho para a roleta: apagado (0.6) em repouso, aceso e
   # com a borda color2 quando o mouse passa, com a mesma suavidade na ida e na
   # volta. A borda mora num ::after por cima da imagem: no proprio quadrado ela
   # somaria 4px na altura e ele deixaria de ser quadrado. */
.fysh_card_prize{ display:block; }
.fysh_card_prize .gspin_fig_mini{ opacity:.6; transition:opacity .3s ease; }
.fysh_card_prize .gspin_fig_mini::after{ content:""; position:absolute; top:0; right:0; bottom:0; left:0; border:2px solid transparent; border-radius:10px; transition:border-color .3s ease; }
.fysh_card_prize:hover .gspin_fig_mini{ opacity:1; }
.fysh_card_prize:hover .gspin_fig_mini::after{ border-color:#2ac1a8; }

/* ==========================================================================
   CALENDARIO (adm_calendar): seis dias da semana e o editor da tarefa em sanfona
   ========================================================================== */
/* # O numero do dia com largura minima, para os seis alinharem. */
.cal-day-badge{
	min-width:26px;
	text-align:center;
}
/* # Hoje ganha um traco no alto do card. Borda e nao sombra: sombra colorida
   # puxa o olho para a moldura. */
.cal-day-today{
	border-top:3px solid #2ac1a8;
}
/* # Dia que passou recua, mas continua legivel: e onde se confere o que ficou. */
.cal-day-past{
	opacity:.75;
}
.cal-day-items{
	min-height:10px;
}
/* # O editor abre logo abaixo da tarefa, dentro do proprio dia. */
.cal-editor{
	margin:2px 0 12px 0;
	padding:12px;
	border:1px solid rgba(129,129,129,.25);
	border-radius:6px;
}

/* ==========================================================================
   HISTORIAS (create/stories): Visões Mês e Semana
   ========================================================================== */
/* # A thumb da historia fica quadrada, como a do create/feed. O !important vence
   # a altura que o adjustView grava inline em todo .thumb_stories (largura x 1,7). */
.stories-thumbs-square .thumb_stories{
	height:auto !important;
	aspect-ratio:1 / 1;
}
/* # A imagem preenche a moldura por posicao: nao depende de o height:100% do
   # filho aceitar a altura que vem do aspect-ratio. */
.stories-thumbs-square .thumb_stories .item_thumb{
	position:absolute;
	top:0;
	left:0;
}

/* ==========================================================================
   CALENDARIO (adm_calendar): painel da tarefa, arrastar e etiqueta do dia
   ========================================================================== */
/* # O painel da tarefa: escondido ate uma tarefa abrir, e ai entra embaixo da
   # semana em largura total. Sem rolagem interna: a pagina cresce normal. */
.cal-panel{
	display:none;
}
#cal_page.cal-panel-open .cal-panel{
	display:block;
	padding-top:8px;
}
/* # Card do calendario: o titulo abre, os icones editam e apagam, e o resto arrasta. */
.cal-task-open{
	cursor:pointer;
}
.cal-task-actions{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	right:8px;
	font-size:13px;
	white-space:nowrap;
}
.cal-task-actions i{
	cursor:pointer;
	opacity:.7;
	margin-left:8px;
}
.cal-task-actions i:hover{
	opacity:1;
}
.cal-task-actions .agenda-excluir{
	position:static;
	transform:none;
}
/* # A tarefa aberta no painel fica marcada na semana. Borda, e nao sombra. */
.cal-task-active{
	border-color:#ff4d60 !important;
}
/* # O dia que vai receber a tarefa arrastada. */
.cal-day-alvo{
	outline:2px dashed rgba(129,129,129,.5);
	outline-offset:-2px;
}
.cal-day-label{
	white-space:normal;
}

/* ==========================================================================
   NOTICIA: comentarios em largura cheia
   ==========================================================================
   O comentario nasce com width:200px fixo (tools/embeds/comment.php) e quem
   abre a largura no feed e o adjustPosts(), chamado pelos embeds de midia do
   post. A tela da noticia nao passa por eles, entao o texto ficava espremido
   numa coluna de 200px no meio de uma pagina larga.
   Resolvido no CSS, e nao no JS: aqui a linha do comentario e flex, o corpo
   ocupa o que sobra e comentario novo ja nasce certo, sem depender de nenhuma
   funcao rodar depois. */
.nw-comments .post_comment,
.nw-comments .post_reply{
	display: flex;
	align-items: flex-start;
}
.nw-comments .post_comment_width,
.nw-comments .post_reply_width{
	width: auto !important;
	flex: 1 1 auto;
	/* # sem isto o flex nao deixa o texto quebrar e estoura a linha */
	min-width: 0;
	overflow-wrap: anywhere;
}