.table-roll {
margin: 25px 0;
padding: .5rem;
border-radius: 15px;
box-shadow: 0 1px 7px rgba(0,0,0,0.17);
}


.table-roll .searchdiv {
    margin-left: auto;
    order: 2; max-width: 40%;
 
}

.table-roll .search {
    float: right;
    padding: 5px 0 5px 30px;
  font-size: 90%;
border-radius: 0;
border: 0;
border-bottom: 1px solid #dae2ed; 
	width: 100%;
}

.table-roll input:focus {
  border-width: 2px;
}


.table-roll .scroll { 
 max-height: 70vh;
}


.article .table-roll ul, .article .table-roll ol {
margin: 0;
padding: 0;

}



.article .table-roll .scroll li,  .article #lista-ordenavel.table-roll .scroll li {padding: 8px 8px 8px 0; border-radius: 10px;}

.article .table-roll li:nth-of-type(2n) {
  background-color: #f5f5ff; 
}



.table-roll li > div:not(.like) {border-right: 15px solid transparent;}

 
 
.table-roll li div::-webkit-scrollbar, .table-roll .t-sticky div::-webkit-scrollbar{ height:0; width: 0}




.article .table-roll li, .article .table-roll .t-sticky {min-width: 600px;}


.special {padding: 0}

.special .scroll  {max-height: 95vh;}




.special .filtrar {flex-flow: row;
display: flex;
width: 100%;
padding: 8px;
background-color: #f6f6f6; }


.special .filtrar button{width: 100%; text-align: center; color: var(--dica-action);font-weight: 600}


.article .special ol {
  margin: 0;
padding: 0;
}


.filtrar button svg{
  width: 24px;
  height: 24px;
  fill: var(--dica-action);
  position: relative;
  vertical-align: bottom;
}


.article .special .descript {
width: auto;
clear: both;
font-size: 14px;
color: #999;
line-height: 19px;
display: block;
}

.article .special .descript img {margin: 10px auto}


.special .twrapper {
  width: 100%;
}

.article .special .scroll li, .article .special .scroll .t-sticky {
border-radius: 0 !important;

 border-bottom: 2px solid #f2f2f2;
  
}



.special li > div {
	color: #000;
 width: calc(50% - 5px); 

}



.special .t-sticky div {width: 50%;}

.article .special li:nth-of-type(2n) {
  background-color: #FCFCFC;
}


.special li .nome {font-weight: 600;
width: calc(50% - 30px);
padding-left: 3px;}


.special .like::before, .special .like::after {
	 transform: translateY(-50%);
width: 24px;
height: 24px;
cursor: pointer;
position: absolute;
display: block;
top: 50%;}


.special .like::before{

content: url(https://dica.com.br/img/emptyheart.svg);

}

.special .liked::after  {
	content: url(https://dica.com.br/img/filledheart.svg);
	
  
}

.special li .like {width: 32px;}




.article .special .scroll .letra div {
  font-size: 150%;
  background-color: #fcfcfc;
  font-weight: bolder;  padding-left: 13px;
}


.special .multitoggle-on {display:none}


.filtrar .clicked svg {
  animation:fa-beat 5s ease infinite;
}
@keyframes fa-beat {
  0% {
    transform:scale(1);
  }
  5% {
    transform:scale(1.25);
  }
  20% {
    transform:scale(1);
  }
  30% {
    transform:scale(1);
  }
  35% {
    transform:scale(1.25);
  }
  50% {
    transform:scale(1);
  }
  55% {
    transform:scale(1.25);
  }
  70% {
    transform:scale(1);
  }
}


.printdivwrap .article {all: unset;}

.favmodal {
display: none;
scrollbar-width: thin;
overflow: auto;
right: 5px;
height: auto;
min-height: 125px;
bottom: unset;
padding-bottom: 8px;
}


.favmodal #closeBtn  {
position: absolute;
top: 5px;
right: 5px;
overflow: visible;
opacity: .4;
font-size: 30px;
line-height: 17px;
}

.favmodal #closeBtn span{
  width: 21px;
  height: 23px;
  display: inline-block;
}


.favmodal .title {
  padding: 10px 10px 0px 10px;
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  text-align: center;
  border-radius: 7px;
}

.favmodal .cabecalho{
  background: #fcfcfc;
  border-radius: 7px;
}


.favmodal .modaldesc  {
  padding: 4px 20px 10px 20px;
  border-bottom: 3px dotted #ccc;
  font-size: 85%;
  text-align: center;
}


.favmodal .special {margin: 0;
box-shadow: none; padding: 0;}


.favmodal .special .scroll {max-height: calc(100vh - 185px); }


.favmodal .special .like::after {
  content: url(https://dica.com.br/img/filledheart.svg);
}



.printdiv {text-align: center;
margin-top: 8px;}

.article .printdiv .bttn {font-size: 87%;
border-radius: 8px;
padding: 7px;
font-weight: 500; border-width: 2px;}


.favmodal.visible {
  display: block;
}





@media screen and (max-width: 551px) {
	#lista-ordenavel {
  margin-left: -10px;
  margin-right: -10px;
}
	
	.favmodal {top: 5px;}

.favmodal .special .scroll {max-height: 230px;}
	
	
	
}