/* Layout geral
---------------- */
body {font-family:Open Sans, Segoe UI; color:#333; font-size:14px; background-color:#f9f9f9; margin:0; padding:0; overflow:auto}
#loader {display:none; place-items:center; height:100vh; background:#f9f9f9; z-index:200; position:relative}
.spinner {width:140px; height:140px; border:10px solid #ddd; border-top-color:midnightblue; border-radius:50%; animation:spin 1s linear infinite}
@keyframes spin {to {transform:rotate(360deg)}}
@media print {nav, .explicacao, .incentivo, #comandos, form, .menuRegras, .icon-left, .icon-right, #scroll {display:none}}
@media only screen and (max-width:400px) {.signup {display:block; padding:5px}}

/* Mensagem de confirmação
---------------------------- */
.msg {margin:30px auto; padding:10px; border-radius:5px; width:50%; text-align:center; position:fixed; left:50%; transform:translateX(-50%); z-index:102; top:-12px; box-shadow:0 3px 5px rgb(0 0 0 / 40%)}
.a {background:#dff0d8; color:#3c763d; border:1px solid #3c763d}
.b {background:#f9e7e7; color:#e04e62; border:1px solid #e04e62}

/* Cabeçalho + Menu de navegação + Rodapé
-------------------------------------------- */
header {padding:10px; text-align:center; background:midnightblue; color:#fff; cursor:default; font-size:30px; font-weight:bold}
header span {font-family:'Star Avenue'; letter-spacing:1px}
header img {position:relative; top:5px}
#menu {position:sticky; top:0; z-index:99}
.navbar {position:fixed; bottom:0; width:100%; background-color:rgb(100 149 237 / 70%); backdrop-filter:blur(10px); overflow:auto; height:59px; text-align:center; border-top:5px solid midnightblue; z-index:99}
.navbar a {color:#222; text-decoration:none; width:50%}

ul.botoesTopo {cursor:default; position:absolute; top:9px; right:10px; margin-block:0}
ul.botoesTopo li {list-style:none; display:inline-block; padding:3px 12px; cursor:pointer; box-shadow:0 1px 0 rgba(12, 13, 14, 0.1), 0 1px 3px rgba(12, 13, 14, 0.1), 0 4px 20px rgba(12, 13, 14, 0.035), 0 1px 1px rgba(12, 13, 14, 0.025); border-radius:5px; border:1px solid transparent; background:#f1f1f1; line-height:30px}
ul.botoesTopo li a {font-size:18px; text-decoration:none; color:#333; margin-bottom:8px}
.sair:hover {background:darkred}
.imprimir:hover {background:green}
.regras:hover {background:lightseagreen}
.sair:hover a:before, .imprimir:hover a:before, .regras:hover a:before {color:#fff}

.infoCabecalho {font-size:9px; position:absolute; color:ghostwhite; margin-left:6px; margin-top:18px; background:mediumblue; padding:2px 10px; border-radius:2px}

@media only screen and (max-width:395px) {.button-inner {padding:1em 1em!important} .navbar {height:80px}}
button.skeu {all:unset; cursor:pointer; -webkit-tap-highlight-color:rgba(0, 0, 0, 0); position:relative; border-radius:12px; background-color:rgba(0, 0, 0, 0.75); box-shadow:-0.15em -0.15em 0.15em -0.075em rgba(5, 5, 5, 0.25),0.0375em 0.0375em 0.0675em 0 rgba(5, 5, 5, 0.1); width:24%; text-align:center; left:1%; top:5px; text-transform:uppercase; margin:0 15px}
button.skeu::after {content:""; position:absolute; z-index:0; width:calc(100% + 0.3em); height:calc(100% + 0.3em); top:-0.15em; left:-0.15em; border-radius:inherit; background:linear-gradient(-135deg,rgba(5, 5, 5, 0.5),transparent 20%,transparent 100%); filter:blur(0.0125em); opacity:0.25; mix-blend-mode:multiply}
button.skeu .button-outer {position:relative; z-index:1; border-radius:inherit; transition:box-shadow 300ms ease; will-change:box-shadow; box-shadow:0 0.05em 0.05em -0.01em rgba(5, 5, 5, 1),0 0.01em 0.01em -0.01em rgba(5, 5, 5, 0.5),0.15em 0.3em 0.1em -0.01em rgba(5, 5, 5, 0.25)}
button.skeu:hover .button-outer, .button-outer.active {box-shadow:0 0 0 0 rgba(5, 5, 5, 1), 0 0 0 0 rgba(5, 5, 5, 0.5),0 0 0 0 rgba(5, 5, 5, 0.25)}
.button-inner {--inset:0.035em; position:relative; z-index:1; border-radius:inherit; padding:1em 0; background-image:linear-gradient(135deg,rgba(230, 230, 230, 1),rgba(180, 180, 180, 1)); transition:box-shadow 300ms ease, clip-path 250ms ease, background-image 250ms ease, transform 250ms ease; will-change:box-shadow, clip-path, background-image, transform; overflow:clip; clip-path:inset(0 0 0 0 round 12px); box-shadow:0 0 0 0 inset rgba(5, 5, 5, 0.1),-0.05em -0.05em 0.05em 0 inset rgba(5, 5, 5, 0.25),0 0 0 0 inset rgba(5, 5, 5, 0.1),0 0 0.05em 0.2em inset rgba(255, 255, 255, 0.25),0.025em 0.05em 0.1em 0 inset rgba(255, 255, 255, 1),0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),-0.075em -0.25em 0.25em 0.1em inset rgba(5, 5, 5, 0.25)}
button.skeu:hover .button-inner, .button-inner.active {clip-path:inset(clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) clamp(1px, 0.0625em, 2px) round 12px); box-shadow:0.1em 0.15em 0.05em 0 inset rgba(5, 5, 5, 0.75),-0.025em -0.03em 0.05em 0.025em inset rgba(5, 5, 5, 0.5),0.25em 0.25em 0.2em 0 inset rgba(5, 5, 5, 0.5),0 0 0.05em 0.5em inset rgba(255, 255, 255, 0.15),0 0 0 0 inset rgba(255, 255, 255, 1),0.12em 0.12em 0.12em inset rgba(255, 255, 255, 0.25),-0.075em -0.12em 0.2em 0.1em inset rgba(5, 5, 5, 0.25)}
button.skeu .button-inner span {position:relative; z-index:4; letter-spacing:-0.05em; font-weight:500; color:rgba(0, 0, 0, 0); background-image:linear-gradient(135deg,rgba(25, 25, 25, 1),rgba(75, 75, 75, 1)); background-clip:text; transition:transform 250ms ease; display:block; will-change:transform; text-shadow:rgba(0, 0, 0, 0.1) 0 0 0.1em; user-select:none}
button.skeu:hover .button-inner span, .button-inner span.active {transform:scale(0.975)}
button.skeu:active .button-inner {transform:scale(0.975)}

footer {text-align:center; font-size:medium; padding:5px 50px 35px; margin-bottom:60px; position:relative; background-image:linear-gradient(90.5deg, rgba(112,181,176,1) 1.9%, rgba(220,244,241,1) 87.7%); box-shadow:0 -1px 3px #000}
footer a {text-decoration:none}
footer a:hover {text-decoration:underline}
.protegido {cursor:default; font-size:smaller; background:cadetblue; padding:5px; border-radius:5px; color:#222}
.protegido a {color:midnightblue}
.sociais a {color:royalblue}
.catatau {width:50px; position:absolute; bottom:0px; right:30%; filter:drop-shadow(0px 10px 10px #000)}
.catatauPerfil {width:50px; position:relative; left:85%; bottom:-34px; z-index:2}

/* Caixa de pesquisa e Filtro
------------------------------- */
#search {background:url(searchicon_b.png) 10px 6px no-repeat #fff; width:40%; font-family:Open Sans; padding:8px 40px; border:1px solid #bbb; position:absolute; left:50%; transition:all .3s; border-radius:14px; float:left; transform:translateX(-50%)}
#search:focus, #search:hover {box-shadow:0 4px 9px rgb(0 0 0 / 20%)}
#search:focus {outline:0}
#not-found {display:none; background:#eee; padding:5px; text-align:center}
#nadaFiltro {display:none}
#tabelaLimites th:nth-child(5), #tabelaLimites tbody tr td:nth-child(5) {display:none}
input[type=search]::-webkit-search-cancel-button {-webkit-appearance:searchfield-cancel-button; cursor:pointer; position:absolute; right:10px}

#totalTurma:hover, .filtraLimites:hover, #pesquisaAlunoLim:hover {background:#ccc}
#tabelaLimites button, #tabelaLimites select, #pesquisaAlunoLim {margin-top:5px; height:24px; font-size:13px; padding:0 10px; display:inline}
#pesquisaAlunoLim {border:1px solid #bbb; color:#333; background:#f9f9f9; border-radius:6px; width:85%}
.filterDiv {display:none}
.show {display:table-row}	
.sort-icon {cursor:pointer; color:royalblue}
.corSortIcon {color:royalblue}

/* Pontuação e Informações
----------------------------- */
#total {position:absolute; text-align:center; left:7%; margin-top:19px}
#totalTurma, .filtraLimites {/* position:absolute; left:7%; width:25%; top:100px;*/ width:110px; text-align:center; border:1px solid #bbb; color:#333; background:#f9f9f9; border-radius:6px; cursor:pointer}
#visualizando {padding:10px; text-align:center; top:0; cursor:default; background:#2d2d2d; color:#fff}
#semregistros {text-align:center; background:darkgreen; color:#fff; padding:30px; margin:2% 5%; border-radius:12px}
#info-aluno {text-align:center; border-bottom:1px solid #bbb; padding:12px; background:#eee}
.nv6 {background:darkmagenta!important; color:white!important}
.nv5 {background:palegreen!important; color:black!important}
.nv4 {background:powderblue!important; color:black!important}
.nv3 {background:orange!important; color:black!important}
.nv2 {background:darkred!important; color:white!important}
.nv1 {background:black!important; color:white!important}
.explicacao {text-align:center; font-size:large; padding:0 10px}
.retorno {padding:1px 15px; /* box-shadow:0 3px 0 rgba(0, 0, 0, .28); border:1px solid #ccc; */ background:#eee; border:2px solid lightslategrey; border-radius:5px; margin:0 5%; color:#111}
.retorno span {position:relative; top:-20px; font-size:40px}
.retorno p {margin-top:-10px}
p strong:nth-of-type(1) {color:#FF5722}
p strong:nth-of-type(2) {color:green}
li.sugestao {list-style-type:none; margin-left:5%; margin-bottom:10px; line-height:1.5}
li.sugestao:before {content:'✓ '; color:blue; font-weight:bold}
li.sugestao a {color:midnightblue}
.limZr {color:darkred}
.limDz {color:mediumvioletred}

.incentivo {font-size:medium; text-align:center; color:royalblue; padding:10px; margin:0 5%; border:2px solid royalblue; border-radius:12px; background:#e6eef6}
.debitos {background:#feebeb; padding:6px 0; border-top:1px solid #bbb}
.creditos {background:#d7ead7; padding:6px 0}
#pontosLimitesAlunoP {text-align:center; color:lightslategrey; font-style:normal; font-size:smaller; padding:0 15px}
#pontosLimitesAlunoL {text-align:center; font-weight:bold; margin-top:20px; padding:0 20px; color:#555}

:root {--progressBarHeight:20px}
.wrapper {background-color:rgb(244 245 249 / 80%); border:1px solid #7D818E; border-radius:10px; margin:16px auto; padding:16px 48px}
.progressWrapper {display:flex; align-items:center; gap:5px; margin-bottom:0}
.icon-left, .icon-right {/*font-size:30px;*/ cursor:default; width:35px; border-radius:5px}
.progressBar {background-color:#ddd; border-radius:var(--progressBarHeight); height:var(--progressBarHeight); overflow:hidden; position:relative; width:100%; flex:1}
.progressFill {height:100%; width:100%; transform-origin:left center; transform:scaleX(0); border-radius:var(--progressBarHeight); background-image:linear-gradient(to right, blue 0%, #D92132 40%, #E34F19 60%, #FF9500 70%, #419E39 90%); background-size:200% 100%; background-position:left center; transition:transform 0.3s ease, background-position 0.3s ease}
.progressAmount {font-size:24px; color:#333}

.main-wrapper {width:90%; max-width:900px; margin:3em auto; text-align:center}
.badge {position:relative; margin:1.5em 3.5em; width:4em; height:6.2em; border-radius:10px; display:inline-block; top:0; transition:all 0.2s ease}
.inativo {pointer-events:none; opacity:0.5; filter:grayscale(1)}
.badge::before, .badge::after {position:absolute; width:4em; height:6.2em; border-radius:10px; background:inherit; content:""; top:0; left:0; right:0; bottom:0; margin:auto}
.badge::before {transform:rotate(60deg)}
.badge::after {transform:rotate(-60deg)}
.badge:hover {top:-4px}
.badge .circle {width:60px; height:60px; position:absolute; background:#fff; z-index:10; border-radius:50%; top:0; left:0; right:0; bottom:0; margin:auto}
.badge .circle i.fa {font-size:2em; margin-top:8px}
.badge .font {display:inline-block; margin-top:1em}
.badge .ribbon {position:absolute; border-radius:4px; padding:5px 5px 4px; width:115px; z-index:11; color:#fff; bottom:8px; left:50%; margin-left:-60px; font-size:14px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.27); text-shadow:0 2px 2px rgba(0, 0, 0, 0.1); text-transform:uppercase; background:linear-gradient(to bottom right, #555 0%, #333 100%); cursor:default}
.rotulo {background-color:red; color:rgb(255, 255, 255); font-weight:bold; text-align:center; margin-left:5px; border-radius:50%; padding:5px 10px; position:absolute; bottom:60px; left:50%; transform:translateX(50%)}
.orange {background:linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%); color:#f68401}
.red {background:linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%); color:#c62828}
.purple {background:linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%); color:#7127a8}
.blue-dark {background:linear-gradient(to bottom right, #1976D2 0%, #283593 100%); color:#1c68c5}
.green-dark {background:linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%); color:#00944a}

/* Botões de comandos
---------------------- */
#comandos {margin-top:15px; position:sticky; top:15px; z-index:100}
@media only screen and (max-width:799px) {.nice-header {display:none} .nh {display:block}}
@media only screen and (min-width:799px) {.nice-header {display:block} .nh {display:none}}
.nh {width:40px!important}
.nice-header, .nh {left:5%; float:left; cursor:pointer; position:absolute; width:120px; box-shadow:0 2px 2px rgba(0, 0, 0, 0.29); border-radius:6px; transition:.25s; background:darkorange; color:#fff; text-align:center; padding:5px; height:21px; line-height:21px; border:2px solid transparent}
.nice-header:hover, .nh:hover {border:2px solid orangered}
.adicionar, .selosLote {padding:4px 20px; outline:0; font-size:20px; border:1px solid #bbb; color:#333; background:#f0f8ff; border-radius:7px; text-decoration:none; cursor:pointer}
.adicionar:hover, .selosLote:hover {background:#add8e6}
.selosLoteAtr {border-radius:5px; border:2px solid #555!important}
.selosLoteAtr:hover {border:2px solid #000!important}
.atrSelosGrupo, #addSomenteAdmin {position:fixed; z-index:200; bottom:75px; width:245px; transform:translateX(-50%); left:50%; background:#000000b5; padding:10px; border-radius:7px; backdrop-filter:blur(2px); border:2px solid grey; box-shadow:0 2px 3px #000}
#scroll {position:fixed; z-index:200; right:10px; bottom:10px; cursor:pointer; width:40px; height:40px; background-color:midnightblue; text-indent:-9999px; display:none; border-radius:60px; box-shadow:-1px 3px 7px rgba(0,0,0,.9)}
#scroll span {position:absolute; top:50%; left:50%; margin-left:-10px; margin-top:-17px; height:0; width:0; border:10px solid transparent; border-bottom-color:#fff}
#scroll:hover {background-color:mediumblue; opacity:1}

/* Tabelas
-------------- */
table {width:90%; margin:20px auto; border-collapse:collapse; text-align:center; vertical-align:middle; background:#fefefe; border:1px solid #bbb; box-shadow:0 1px 0 rgb(12 13 14 / 10%), 0 1px 3px rgb(12 13 14 / 10%), 0 4px 20px rgb(12 13 14 / 4%), 0 1px 1px rgb(12 13 14 / 3%)}
tr {border-bottom:1px solid #bbb}
tr:hover, th {background:#f1f1f1}
td, th {height:40px; padding:8px 3px; max-width:100px; border:1px solid #bbb}
td label {display:block; width:100%; height:100%; cursor:pointer}
th i {margin-right:5px}
.ajusteMargem {margin-top:65px}
.linhaInc {font-style:italic; font-weight:100; background:#eee; opacity:.7}

.panel {padding:0 18px; overflow:hidden; text-align:justify}
.accordion {cursor:pointer; width:100%; height:100%; border:none; outline:none; display:none; transition:0.4s; background:transparent}
.visibilidade {display:inline!important}
.mudaBorda {border-bottom:1px solid transparent!important}
.fa-times {transform:rotateZ(360deg); transition:transform 0.25s linear}
.fa-times:before {color:#D80000}
.fa-eye {transform:rotateZ(0deg); transition:transform 0.25s linear}
.fa-eye:before {color:#333}
.visualizarRegistros {text-decoration:none; color:inherit}
.visualizarRegistros:hover {text-decoration:underline; color:royalblue}

tr:hover .actions {display:inline}
.actions {text-decoration:none; display:none}
.actions:before {font-size:18px}
.mais_btn:before, .fa-paper-plane-o:before {color:#228b22}
.edit_btn:before {color:royalblue}
.acs_btn:before {color:orangered}
.del_btn:before {color:#D80000}
.actions:hover:before, .accordion:hover:before {filter:contrast(200) brightness(50)}

@keyframes blink {0% {background-color:greenyellow} 50% {background-color:transparent} 100% {background-color:greenyellow}}
.piscar {animation:blink 0.75s ease-in-out 3}

.btn-toggle {/*margin:0 4rem;*/ display:block; margin:0.5em auto; padding:0; cursor:pointer; position:relative; border:none; /* height:1.5rem; width:3rem;*/ width:5.5em; height:1.4em; border-radius:1.5rem; color:#6b7381; background:#c6c6c6}
.btn-toggle:focus, .btn-toggle.focus, .btn-toggle.active:focus {outline:none}
.btn-toggle:before, .btn-toggle:after {display:none; line-height:1.5rem; width:4rem; text-align:center; font-weight:600; font-size:.75rem; text-transform:uppercase; letter-spacing:2px; position:absolute; bottom:0; transition:opacity .25s; color:#6b7381}
.btn-toggle:before {content:'Não'; left:-4rem}
.btn-toggle:after {content:'Selos'; right:-4rem; opacity:.5}
.btn-toggle > .handle {position:absolute; top:.1875rem; left:.1875rem; /*width:1.125rem; height:1.125rem;*/ width:0.9em; height:0.9em; border-radius:1.125rem; background:#fff; transition:left .25s}
.btn-toggle.active {background-color:#29b5a8; transition:background-color .25s; color:powderblue}
.btn-toggle.active > .handle {/*left:1.6875rem;*/ left:3.6rem; transition:left .25s}
.btn-toggle.active:before {opacity:.5}
.btn-toggle.active:after {opacity:1}

tfoot strong {text-transform:uppercase}
th.sticky {background:#000; color:#fff}
/* .contEst {border:2px solid #777; margin:0 7px; padding:10px; border-radius:10px; background:#ddd} */
.contEst i {margin-right:5px}
.panelProb {background:indianred}
.panelSelo {background:lightgreen}
.estProb {background:#e04e62; color:#fff}
.estSelo {background:#3c763d; color:#fff}
.sanfona {/*background-color:#eee; color:#444;*/ cursor:pointer; padding:18px; width:100%; margin:5px 0; border:3px solid transparent; text-align:left; outline:none; font-size:15px; transition:0.4s; border-radius:12px}
.sanfona:hover {border:3px solid #3d3d3d}
.sanfona.active {background-color:#3d3d3d; border-radius:12px 12px 0 0; margin-bottom:0}
.sanfona:after {content:'\002B'; color:#fff; font-weight:bold; float:right; margin-left:5px}
.sanfona.active:after {content:"\2212"}
.panelEst {max-height:0; transition:max-height 0.2s ease-out; overflow-y:auto}
#tabelaLimites button, #tabelaLimites select, #pesquisaAlunoLim {margin-top:5px}
/* .pl {vertical-align:middle; margin-bottom:3px; padding-right:7px} */

#estatisticas {padding:70px 0; background:lavender}
.botoesAbaEst {display:flex; align-items:stretch; margin:0 5px}
.tablink {background-color:coral; color:#fff; float:left; outline:none; cursor:pointer; padding:9px 16px; font-size:15px; width:20%; border:1px solid #555; border-left:none}
.tablink:first-child {border-left:1px solid #555}
.tablink.active {background-color:orange; border-bottom:none; text-shadow:0px 1px 6px rgba(0, 0, 0, 0.6); text-transform:uppercase; font-weight:600}
.tablink:hover {background-color:chocolate}
.tabcontent {display:none; height:100%; padding:10px; border:1px solid #555; margin:-1px 5px 0; background:#f9f9f9}
#tabelaLimites {width:100%; margin:5px auto}

.colunaCoo {background:lightgoldenrodyellow}
.colunaCor {background:darkseagreen}
.thCoo {background:#FFC000}
.thCor {background:#13501B; color:#fff}

h2 {text-align:center; font-weight:bold}
.prob_alto {background-color:#ff9999; font-weight:bold} 
.prob_medio {background-color:#ffcc66}  
.prob_baixo {background-color:#eeee75}  
.selo_alto {background-color:#003400; color:#fff; font-weight:bold} 
.selo_medio {background-color:#009929; color:#fff}  
.selo_baixo {background-color:#5ccb5f; color:#fff}
.zero {opacity:0.3}

/* Formulário 
--------------- */
.bg-img {background-image:url("../estilo/eplc.jpg"); min-height:600px; background-position:center; background-repeat:no-repeat; background-size:cover; position:relative}
.container {position:absolute; transform:translateX(-50%); left:50%; max-width:375px; backdrop-filter:blur(2px); background:rgb(215 215 215 / 70%); box-shadow:0 1px 0 rgb(12 13 14 / 10%), 0 1px 3px rgb(12 13 14 / 10%), 0 4px 20px rgb(12 13 14 / 4%), 0 1px 1px rgb(12 13 14 / 3%); border:none; padding:20px 10px}
form {width:90%; margin:75px auto; text-align:left; padding:10px; border:3px solid #bbb; border-radius:7px; background:#d7d7d7}
#formVotacao {width:auto; margin:0; border:none; border-radius:0}
select {height:30px}
textarea {max-width:98%}
.intro {color:#000}
.input-group {margin:10px 0; padding:10px}
.input-group:nth-child(odd) {background-color:#beb9b9; border-radius:5px}
.input-group label {display:block; text-align:left; margin:3px}
.input-group input {height:18px; width:97%; padding:6px; font-size:15px; border:1px solid #bbb}
/* .bordaAgrupamento {border-top:1px solid #aaa} */
.btn {padding:10px; font-size:14px; color:#fff; background:#2e8b57; border:none; cursor:pointer}
.btn:hover {background:#228b22}
.cancelar {margin-left:10px; color:grey}
.cancelar:hover {color:darkslategrey}
.contador {font-size:14px; color:#555}
.input-group label:after {content:" *"; color:red}
.semResultados {position:relative!important; width:97%; padding:0 6px!important; z-index:101!important}
.signup {background:none; color:crimson; text-decoration:none}
.voltar {background:#f1f1f1; text-decoration:none; border:1px solid #111; padding:3px 15px; color:#111; border-radius:5px}
.signup:hover, .voltar:hover {text-decoration:underline; background:none}
#semUsuario, #semCodigo, #outroCampo {display:none}
#semUsuario:hover {background:#007FFF; border:1px solid #003EFF; color:#fff}
#agrupSugestoes {border:2px solid cadetblue; margin:10px; height:250px; overflow-y:scroll; padding:5px; box-shadow:0 2px 7px rgb(0 0 0 / 75%); border-radius:10px 0 0 10px}
#desfazSugestao {margin-top:10px; padding:5px 10px; cursor:pointer}
.scrollGradient {overflow:auto; --g:radial-gradient(85% 20px, #000, #0000); background: linear-gradient(#fff 10px, #0000 40px calc(100% - 40px),#fff calc(100% - 10px)) local, var(--g) top/100% 200%, var(--g) bottom/100% 200%}
.possivelSugestao {display:inline-block; padding:10px; margin:5px; background:#f1f1f1; cursor:pointer; border:2px solid #8e8c8c; position:relative; opacity:.8}
.possivelSugestao:hover {border:2px solid purple; color:#dcd7d7; border-radius:5px}
.possivelSugestao:hover li.sugestao:before, .possivelSugestao:hover li.sugestao a {color:#dcd7d7!important}
.possivelSugestao::after {content:""; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:30px; opacity:0; transition:opacity 0.2s ease}
.possivelSugestao:hover::after {content:"➕"; opacity:1}
.possivelSugestao li.sugestao {margin-left:0!important; line-height:1.3!important}