MediaWiki:Common.css

/** ESTILOS GERAIS - INÍCIO */

.comprasgov {
  margin-block: -20px;
  margin-inline: -5px;
  translate: 0 -3px;
}

/* Variáveis iniciais - Cores e tamanhos */
:root {
  --azul-ufsc: #003893;
  --fundo-pagina-geral: floralwhite;
  --fundo-conteudo: color-mix(in srgb, var(--fundo-pagina-geral) 50%, white);
  --borda: var(--azul-ufsc);

  --fundo-par: #e8f7fc;
  --fundo-impar: #bae4ff;
  --cor-botao: var(--fundo-impar);
  --texto-sumario: var(--azul-ufsc);

  --cor-info: #bae4ff;
  --cor-alerta: #ffff99;
  --cor-erro: #ff7979;
  --cor-ok: #80ff80;
  
  --borda-sombra: 1px solid rgba(0,0,0,0.3) !important;
  --box-sombra: 2px 2px 2px rgba(0,0,0,0.2) !important; 
  --borda-sombra-hover: 1px solid var(--borda) !important;
  --box-sombra-hover: 5px 5px 10px rgba(0,0,0,0.2) !important;

  --tamanho-botao: 25px;

  --cor-fluxo: var(--azul-ufsc);
  --cor-fluxo-mix: white;
  --cor-fluxo-final: 25%;
  --color-space: hsl;

  --fechado: "➕";
  --aberto: "➖";
  --tamanho-acordeao: 75%;
}

@property --cor-1 {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

@property --cor-2 {
  syntax: '<color>';
  initial-value: white;
  inherits: false;
}

/* Barra lateral - botões */

.vector-menu-portal .vector-menu-heading {
  visibility: hidden;
}

#mw-panel .vector-menu-content-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  width: calc(var(--tamanho-botao) + 5px);
  margin-left: .25em;
  gap: 10px;
}

#mw-panel .vector-menu-content-list:hover > .mw-list-item a:not(:hover) {
  filter: grayscale(100%);
  opacity: .5;
  animation: unset;
}

#mw-panel .mw-list-item a span {
  background-color: var(--azul-ufsc);
  color: white;
  display: none;
  align-items: center;
  border-radius: 5px;
  padding: 0 10px 0 0;
  text-align: left;
  font-size: 12px;
}

#mw-panel .mw-list-item a span:before {
  content: "";
  transform: translateX(-5px) rotate(45deg);
  width: 10px;
  height: 10px;
  background-color: inherit;
}

#mw-panel .mw-list-item a:hover span {
  display: flex;
  width: max-content;
  margin-left: calc(var(--tamanho-botao) + 15px);
}

#mw-panel .mw-list-item a:hover {
  display: flex;
  width: fit-content;
  padding: 0px;
  animation: unset;
}

#mw-panel .mw-list-item a {
  display: flex;
  text-decoration: none;
  padding: 0px calc(var(--tamanho-botao) + 5px) 0px 0px;
  min-height: calc(var(--tamanho-botao) + 5px);
  background-position-y: center;
  background-size: var(--tamanho-botao);
  background-repeat: no-repeat;
  transition: filter .25s ease-in-out, opacity .25s ease-in-out;
}

@keyframes flash-botao {
  0%, 100% { 
    filter: hue-rotate(0deg);
    transform: scale(1);
  } 
  50% {
    transform: scale(1.1);
    filter: hue-rotate(147deg);
  }
}

#n-mainpage-description a {
  background-image: url(https://compras.wiki.ufsc.br/images/9/9a/Home.png);
}

#n-Calendário-de-Compras a {
  background-image: url(https://compras.wiki.ufsc.br/images/2/22/Schedule.png);
}

#n-Consultas a {
  background-image: url(https://compras.wiki.ufsc.br/images/d/d7/Consultas.png);
  animation: flash-botao 1s infinite;
}

#n-Apresentação a {
  background-image: url(https://compras.wiki.ufsc.br/images/d/de/Group.png);
}

#n-Enviar-arquivo a {
  background-image: url(https://compras.wiki.ufsc.br/images/8/80/Camera.png);
}

#n-Ajuda-ao-GT a {
  background-image: url(https://compras.wiki.ufsc.br/images/4/4c/Configuracoes.png);
}

#n-recentchanges a {
  background-image: url(https://compras.wiki.ufsc.br/images/b/bf/History.png);
}

#n-DCOM a {
  background-image: url(https://compras.wiki.ufsc.br/images/0/03/DCOM-logo_manual.png);
}

#n-Topo a {
  background-image: url(https://compras.wiki.ufsc.br/images/b/b3/Up-arrow.png);
}
/* Barra lateral - botões - FIM */

/* Configurações gerais da página - logo, cores e margem - início */
#mw-head {
  background-image: url(https://compras.wiki.ufsc.br/images/2/22/Logo-manual-texto.png);
  background-repeat: no-repeat;
  background-size: 11.5em;
  background-position-y: bottom;
  background-position-x: 5.5em;
}

.mw-wiki-logo {
  width: unset !important;
  background-image: url(https://compras.wiki.ufsc.br/images/2/22/Logo-manual-texto.png);
  background-size: 100%;
  height: 6em !important;
  background-position: bottom !important;
  opacity: 0;
  transition: all ease-in-out .5s;
}

#p-logo {
  background-image: url(https://compras.wiki.ufsc.br/images/c/c7/Logo-manual-icone.png);
  background-size: contain;
  background-repeat: no-repeat;
  width: unset !important;
  height: 5em;
  margin-top: .5em;
}

.mw-body {
  margin-left: 5.5em;
  margin-right: 200px;
  border: 1px solid var(--borda) !important;
  transition: margin-right .25s ease;
}

body {
  background-color: var(--fundo-pagina-geral);
}

#mw-panel {
  width: 4.5em;
  position: fixed;
  padding-inline: .5em;
  z-index: 9999;
}

#mw-page-base {
  background-image: linear-gradient(to bottom, white, 50%, var(--fundo-pagina-geral) 100%);
}
/* Configurações gerais da página - fim */

/* Estilo do cabeçalho - início */
#right-navigation {
  margin-right: 200px;
  transition: margin-right .25s ease;
}

#p-personal {
  right: 0;
  margin-right: 200px;
  transition: margin-right .25s ease;
}

#p-namespaces,
#pt-mytalk,
#p-tb {
  display: none;
}

.vector-search-box {
  margin-right: 0;
}

.vector-menu-tabs, 
.vector-menu-tabs a, 
#mw-head .vector-menu-dropdown .vector-menu-heading {
  background-image: linear-gradient(to bottom, white 0, var(--borda) 100%);
}

.vector-menu-tabs-legacy li {
  background-image: unset;
}
/* Estilo do cabeçalho -fim */

/* Estilo do rodapé - início */
.mw-footer {
  margin-left: 5.5em;
  margin-right: 200px;
  padding-right: 0;
}

#footer-places-privacy {
  display: none;
}

#footer-icons {
  float: left;
}
/* Estilo do rodapé - fim */

/* Ajusta automaticamente tamanho das imagens para não avançar para fora da página */
.thumbimage {
  display: block;
  width: 100%;
  height: auto;
}

.thumbinner {
  max-width: 100%;
}

/* Estilo do título das páginas */
.firstHeading {
  color: var(--azul-ufsc);
  font-family: 'Poppins', 'Arial' !important;
  border-image: linear-gradient(to right, var(--borda), white) 1;
}

/* Sombreamento das caixas em geral - início */
.sombra,
.tabs-tabbox > .tabs-container,
a:has(.botao_pg_inicial),
#referencia_tip {
  border: var(--borda-sombra);
  box-shadow: var(--box-sombra);
  transition: border ease-in-out .5s, box-shadow ease-in-out .5s;
}

.sombra:hover,
.tabs-tabbox > .tabs-container:hover,
a:has(.botao_pg_inicial):hover {
  border: var(--borda-sombra-hover);
  box-shadow: var(--box-sombra-hover);
}
/* Sombreamento - fim */

/* Linha horizontal */
@media screen {
hr {
  border-width: 1px;
  border-style: solid;
  border-image: linear-gradient(to right, white, var(--azul-ufsc), white) 1;
  margin: 10px auto;
  width: 90%;
  height: 0;
}
}

/* Oculta título e botão Topo e ajusta margem para impressão */
@media print{
  .toc {
    visibility: hidden !important;
  }

  .mw-body {
    margin-right: 0px !important;
  }

  .topo {
    visibility: hidden !important;
  }
}

/* Listas - início */

ol { 
  list-style-type: decimal; 
}

ol li > ol { 
  list-style-type: lower-alpha; 
}

ol li > ol li > ol { 
  list-style-type: lower-roman; 
}

/* Listas - fim */

/* ESTILOS GERAIS - FIM */

/* REFERÊNCIAS - INÍCIO */

/* Efeito de flash na referência ativa */
.reference {
  border-radius: 5px;
}

.reference:target {
  animation: flash-borda 2s ease-in-out infinite;
}

.mw-references-wrap :target {
  animation: flash-fundo 2s ease-in-out infinite;
}

@keyframes flash-fundo {
  from { 
    background: var(--cor-erro); 
    border-radius: 10px; 
    box-shadow: inset 0 0 2px 2px white; 
  } to { 
    background: transparent; 
    border-radius: 10px; 
    box-shadow: inset 0 0 2px 2px white; 
  }
}

@keyframes flash-borda {
  from { outline: 5px solid var(--cor-erro); }
  to   { outline: 5px solid transparent; }
}

/* Estilo do complemento das referências */
.referencia {
  font-style: italic;
  font-weight: initial;
}

.referencia a.external {
  background-image: unset;
  padding-right: unset;
}

/* Pré-visualização das referências - tooltip */

#referencia_tip {
  max-width: 150px;
  background-color: var(--cor-alerta);
  color: black;
  font-size: 80%;
  text-align: left;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 9999;
  display: none;
  top: 0;
  left: 0;
}

#referencia_tip::before {
  content: "";
  position: absolute;
  translate: 2px -11px;
  rotate: 45deg;
  width: 10px;
  height: 10px;
  background-color: inherit;
  border-top: var(--borda-sombra);
  border-left: var(--borda-sombra);
}

/* REFERÊNCIAS - FIM */

/* ÍNDICE DAS PÁGINAS - INÍCIO */

.toc {
  position: fixed;
  width: 180px;
  right: 0px;
  top: 55px;
  background-color: transparent;
  border: 0px;
  font-size: 85%;
  padding: 10px;
  line-height: 1.3;
  height: 80vh;  
  transition: all ease-in-out .5s;
}

.toc .toctitle {
  transform: translateY(-10px);
  line-height: 2;
  margin-bottom: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right, white, var(--borda), white) 1;
}

.toc h2 {
  color: var(--azul-ufsc);
}

.toctext,
.tocnumber {
  opacity: 75%;
}

.toctogglespan {
  transform: translateY(27px);
  position: absolute;
  right: 0;
  border: 0;
  padding: 0px 8px;
  background-color: var(--fundo-impar);
  cursor: pointer;
  font-size: 90%;
  border-radius: 2px;
}

.toctogglespan:hover {
  background: var(--azul-ufsc);
}

.toctogglespan:hover .toctogglelabel {
  color: white;
}

.toctogglespan::after,
.toctogglespan::before {
  content: '';
}

.toctogglelabel {
  text-decoration: none !important;
}

.mw-content-ltr .toc ul {
  height: inherit;
  overflow: hidden auto;
}

/* Oculta os níveis mais baixos do índice */
.toclevel-4,
.toclevel-5 {
  display: none;
}

/* Ressalta título selecionado no índice */

:is(h1, h2, h3, h4):has(> span:target) {
  animation: toc-visitado 2s ease-in-out infinite;
  box-shadow: inset 0 0 5px 3px white; 
  border-radius: 10px 10px 0 0;
}

@keyframes toc-visitado {
  from { 
    background-color: var(--cor-info); 
  } to { 
    background-color: transparent; 
  }
}

/** ÍNDICE DAS PÁGINAS - FIM */

/** AVISOS E DESTAQUES - INÍCIO */

.aviso {
  border-radius: 10px;	
  border: var(--borda-sombra);
  box-shadow: var(--box-sombra);
  margin: .5rem .5rem .5rem .2rem;
  padding: .5rem .5rem .5rem 3rem;
  position: relative;
}

.aviso::before {
  background-size: contain;
  position: absolute;
  left: .5rem;
  width: 2rem;
  height: 2rem;
  content: "";
}

.aviso:hover {
	box-shadow: var(--box-sombra-hover);
}

.info,
.alerta,
.erro,
.ok,
.video {
  --cor-2: var(--fundo-pagina-geral);
  border-left: solid var(--cor-3);
  border-width: 1px 1px 1px 5px;
  background: linear-gradient(to bottom right, var(--cor-1), var(--cor-2));  
  transition: --cor-1 .5s, --cor-2 .5s, box-shadow .5s, border .5s;
  transition-timing-function: ease-in-out;
}

.info:hover,
.alerta:hover,
.erro:hover,
.ok:hover,
.video:hover {
  --cor-1: var(--fundo-pagina-geral);
  border: solid var(--cor-3);
  border-width: 1px 1px 1px 5px; 
}

.info,
.destaque-info {
  --cor-1: var(--cor-info);
  --cor-3: blue;
}
  
.info::before,
.destaque-info::before {
  background-image: url(https://compras.wiki.ufsc.br/images/b/b3/Info.png);
}

.info:hover {
  --cor-2: var(--cor-info);
}

.alerta,
.destaque-alerta {
  --cor-1: var(--cor-alerta);
  --cor-3: darkgoldenrod;
}

.alerta::before,
.destaque-alerta::before {
  background-image: url(https://compras.wiki.ufsc.br/images/e/e3/Aviso.png);
}

.alerta:hover {
  --cor-2: var(--cor-alerta);
}

.erro,
.destaque-erro,
.video {
  --cor-1: var(--cor-erro);
  --cor-3: red;
}

.erro::before,
.destaque-erro::before {
  background-image: url(https://compras.wiki.ufsc.br/images/5/56/Erro.png);
}

.video::before {
  background-image: url(https://compras.wiki.ufsc.br/images/0/05/Logo_youtube.png);
}

.erro:hover,
.video:hover {
  --cor-2: var(--cor-erro);
}

.ok,
.destaque-ok {
  --cor-1: var(--cor-ok);
  --cor-3: green;
}

.ok::before,
.destaque-ok::before {
  background-image: url(https://compras.wiki.ufsc.br/images/1/1b/Ok.png);
}

.ok:hover {
  --cor-2: var(--cor-ok);
}

.destaque {
  border-radius: 10px; 
  box-shadow: inset 0 0 20px 2px white; 
  padding-left: 15px;
  background-color: var(--cor-1);
}

.destaque::before {
  content: "";
  background-size: contain;
  position: absolute;
  width: 15px;
  height: 15px;
  translate: -15px 4px;
}

/** AVISOS E DESTAQUES - FIM */

/** PÁGINA INICIAL - INÍCIO */

.sumario {
  width: 100%
}

.coluna-sumario {
  vertical-align: top;
  width: 80%;
}

.coluna-sumario .sumario-grupo:nth-child(2n + 1) {
  --cor-1: var(--fundo-impar);
  --cor-2: var(--fundo-pagina-geral)
}

.coluna-sumario .sumario-grupo:nth-child(2n + 2) {
  --cor-1: var(--fundo-par);
  --cor-2: var(--fundo-pagina-geral)
}

.coluna-sumario .sumario-grupo:nth-child(2n + 1):hover {
  --cor-2: var(--fundo-impar);
  --cor-1: var(--fundo-pagina-geral)
}

.coluna-sumario .sumario-grupo:nth-child(2n + 2):hover {
  --cor-2: var(--fundo-par);
  --cor-1: var(--fundo-pagina-geral)
}

.sumario-grupo {
  width: 100%; 
  border-radius: 10px;
  margin-bottom: 20px;
  background: linear-gradient(to bottom right, var(--cor-1), var(--cor-2));  
  transition: --cor-1 .5s, --cor-2 .5s, box-shadow .5s, border .5s;
  transition-timing-function: ease-in-out;
}

.sumario-imagem {
  width: 150px; 
  text-align: center; 
  vertical-align: top; 
  padding-top: 10px;
  font-weight: bold;
  color: var(--texto-sumario);
}

.sumario-imagem img {
  width: 75px;
  height: auto;
}

.sumario-imagem + td {
  vertical-align: top;
}

.sumario-linha,
.sumario-mostrar {
  padding: 5px 10px 5px 5px; 
  border-radius: 7px;
  font-weight: bold;
  color: var(--texto-sumario);
  display: flex;
  justify-content: space-between;
}

.sumario-mostrar::after {
  content: var(--fechado);
  font-size: var(--tamanho-acordeao);
  align-content: center;
}

.sumario-mostrar:not(:has(+ .mw-collapsed))::after {
  content: var(--aberto);
}

.sumario-linha:hover {
  background-color: var(--fundo-pagina-geral);	
}

.sumario-mostrar:hover {
  background-color: var(--fundo-pagina-geral);	
  border-radius: 7px 7px 0 0 ;
}

.sumario-mostrar:hover + .sumario-conteudo {
  background: linear-gradient(to top, white, var(--fundo-pagina-geral));	
}

.sumario-conteudo {
  background-image: linear-gradient(to top, white, transparent); 
  padding: 5px; 
  border-radius: 0 0 7px 7px;
  margin-bottom: 5px;
}

.coluna-botoes {
  vertical-align: top; 
  width: 20%;
  padding-left: 20px; 
}

.coluna-botoes p {
  margin: 0 !important;
}

a:has(.botao_pg_inicial) {
  --cor-1: var(--cor-botao);
  --cor-2: var(--fundo-pagina-geral);
  width: 100px; 
  border-radius: 10px; 
  margin: 0 auto 20px auto;
  min-height: 75px;
  justify-content: center;
  align-content: space-evenly;
  text-align: center;
  display: grid;
  gap: 10px;
  font-weight: bold;
  padding: 10px;
  color: var(--texto-sumario) !important;
  text-decoration: none !important;
  background: linear-gradient(to bottom right, var(--cor-1), var(--cor-2));  
  transition: --cor-1 .5s, --cor-2 .5s, box-shadow .5s, border .5s;
  transition-timing-function: ease-in-out;
}

a:has(.botao_pg_inicial)::after {
  content: attr(title);
}

a:has(.botao_pg_inicial):hover {
  --cor-1: var(--fundo-pagina-geral);
  --cor-2: var(--fundo-impar);
}

.botao_pg_inicial {
  width: 50px;
  height: auto;
  justify-self: center;
}

/** PÁGINA INICIAL - FIM */

/** ABAS - INÍCIO */

.tabs-tabbox > .tabs-container {
  padding: 10px;
  display: flex; 
  align-items: center; 
  overflow: hidden; 
  transition: all ease-in-out .5s;
  background-color: var(--fundo-conteudo);
}

.tabs-tabbox > .tabs-input:checked + .tabs-label {
  font-weight: bold;
  color: var(--azul-ufsc);
  background-color: var(--fundo-conteudo);
}

.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
  font-weight: bold;
  color: var(--azul-ufsc);
  background-color: var(--fundo-conteudo);
}

.tabs-label {
  background-color: var(--azul-ufsc);
  border: var(--borda-sombra);
  color: white;
  transition: background-color .25s ease-in-out, color .25s ease-in-out;
}

.tabs-label:hover {
  color: var(--azul-ufsc);
  background-color: var(--fundo-conteudo);
}

.tabs-content {
  width: 100%;
}

/** ABAS - FIM */

/* TEXTO OCULTÁVEL - INÍCIO */

.oculto-titulo {
  margin-top: 10px;
  padding: 0 10px;
  background-color: var(--cor-alerta);
  color: var(--azul-ufsc);
  font-weight: bold;
  border-radius: 6px 6px 0 0;
  display: flex;
  justify-content: space-between;
  transition: all ease-in-out .5s;
}

.oculto-titulo:not(:has(+ .mw-collapsed)) {
  color: white;
  background-color: var(--azul-ufsc);
}

.oculto-titulo p {
  margin-right: 30px !important;
}

.oculto-titulo::after {
  content: var(--fechado);
  font-size: var(--tamanho-acordeao);
  align-content: center;
}

.oculto-titulo:not(:has(+ .mw-collapsed))::after {
  content: var(--aberto);
}

.oculto-conteudo {
  padding: 10px;
  background-color: var(--fundo-conteudo);
  border-radius: 0 0 6px 6px;
}

.oculto-conteudo :is(h1, h2, h3, h4):first-child {
  visibility: hidden;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  position: relative;
  top: -60px;
}

.oculto-conteudo p:has(br:only-child) {
  display: none;
}

/* TEXTO OCULTÁVEL - FIM */

/* FLUXOGRAMA - INÍCIO */

.fluxo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: fit-content;
  border-radius: 10px;
  margin-right: auto;
  margin-left: auto;
  background: var(--fundo-conteudo);
  padding: 10px;
  padding-right: 60px;
  margin-bottom: 10px;
}

.fluxo-destaque-sim {
  background-color: var(--cor-erro) !important;
}

.fluxo-coluna {
  min-width: 175px;
  max-width: 175px;
  padding-right: 50px;
}

.fluxo-coluna:hover .fluxo-titulo {
  color: var(--azul-ufsc);
  background-color: var(--cor-alerta) !important;
  transition: all .25s ease-in-out;
}

.fluxo-titulo {
  --h: 1.5em;
  clip-path: polygon(0 100%, calc(100% - var(--h)) 100%, 100% 50%, calc(100% - var(--h)) 0, 0 0, var(--h) 50%);
  display: flex;
  align-items: center;
  width: 100%;
  height: 1.5em;
  padding: 15px 40px 15px 25px;
  font-weight: bold;
  color: white;
  font-size: 90%;
}

.fluxo-conteudo {
  padding-top: 10px;
  padding-left: 5px;
  margin-right: -30px;
  font-size: 80%;
}

.fluxo .fluxo-coluna:nth-child(1) .fluxo-titulo {
  background: var(--cor-fluxo);
  clip-path: polygon(0 100%, calc(100% - var(--h)) 100%, 100% 50%, calc(100% - var(--h)) 0, 0 0);
  padding-left: 15px;
  padding-right: 50px;
  border-radius: 5px 0px 0px 5px;
}

.fluxo .fluxo-coluna:nth-child(2) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (2 - 1)));
}

.fluxo .fluxo-coluna:nth-child(3) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (3 - 1)));
}

.fluxo .fluxo-coluna:nth-child(4) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (4 - 1)));
}

.fluxo .fluxo-coluna:nth-child(5) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (5 - 1)));
}

.fluxo .fluxo-coluna:nth-child(6) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (6 - 1)));
}

.fluxo .fluxo-coluna:nth-child(7) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (7 - 1)));
}

.fluxo .fluxo-coluna:nth-child(8) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (8 - 1)));
}

.fluxo .fluxo-coluna:nth-child(9) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (9 - 1)));
}

.fluxo .fluxo-coluna:nth-child(10) .fluxo-titulo {
  background: color-mix(in var(--color-space), var(--cor-fluxo), var(--cor-fluxo-mix) calc(var(--coeficiente-cor-fluxo) * (10 - 1)));
}

.fluxo .fluxo-coluna:last-child {
  padding-right: 15px;
}

.fluxo .fluxo-coluna:last-child .fluxo-titulo {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0, var(--h) 50%);
  border-radius: 0px 5px 5px 0px;
}

.fluxo-coluna:first-child:nth-last-child(5),
.fluxo-coluna:first-child:nth-last-child(5) ~ .fluxo-coluna {
  min-width: 130px;
  max-width: 130px;
}

.fluxo-coluna:first-child:nth-last-child(6),
.fluxo-coluna:first-child:nth-last-child(6) ~ .fluxo-coluna {
  min-width: 110px;
  max-width: 110px;
}

.fluxo-coluna:first-child:nth-last-child(7),
.fluxo-coluna:first-child:nth-last-child(7) ~ .fluxo-coluna,
.fluxo-coluna:first-child:nth-last-child(8),
.fluxo-coluna:first-child:nth-last-child(8) ~ .fluxo-coluna,
.fluxo-coluna:first-child:nth-last-child(9),
.fluxo-coluna:first-child:nth-last-child(9) ~ .fluxo-coluna,
.fluxo-coluna:first-child:nth-last-child(10),
.fluxo-coluna:first-child:nth-last-child(10) ~ .fluxo-coluna {
  min-width: 100px;
  max-width: 100px;
}

.fluxo:has(> :last-child:nth-child(1)) .fluxo-coluna .fluxo-titulo {
  clip-path: unset;
  border-radius: 5px;
}
.fluxo:has(> :last-child:nth-child(2)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (2 - 1));
}
.fluxo:has(> :last-child:nth-child(3)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (3 - 1));
}
.fluxo:has(> :last-child:nth-child(4)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (4 - 1));
}
.fluxo:has(> :last-child:nth-child(5)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (5 - 1));
}
.fluxo:has(> :last-child:nth-child(6)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (6 - 1));
}
.fluxo:has(> :last-child:nth-child(7)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (7 - 1));
}
.fluxo:has(> :last-child:nth-child(8)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (8 - 1));
}
.fluxo:has(> :last-child:nth-child(9)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (9 - 1));
}
.fluxo:has(> :last-child:nth-child(10)) {
  --coeficiente-cor-fluxo: calc((100% - var(--cor-fluxo-final)) / (10 - 1));
}

/* FLUXOGRAMA - FIM */

/* DICA - INÍCIO */

.dica {
  position: relative;
  border-bottom: 1px dotted black;
  box-shadow: inset 0 0 2px 2px white; 
  background-color: var(--cor-alerta);
  cursor: help;
}

.dica .dica-texto {
  --dica-tamanho: 300px;

  visibility: hidden;
  width: var(--dica-tamanho);
  background-color: var(--cor-alerta);
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: calc(var(--dica-tamanho) / 2 * -1);

  opacity: 0;
  transition: opacity .5s ease-in-out, border ease-in-out .5s,box-shadow ease-in-out .5s;
}

.dica .dica-texto::after {
  content: "";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--azul-ufsc) transparent;
}

.dica:hover .dica-texto {
  visibility: visible;
  opacity: 1;
}

.dica .dica-texto a {
  color: var(--azul-ufsc) !important;
  text-decoration: solid 1px underline var(--azul-ufsc) !important;
}

.dica::after {
  content: "💡";
  display: inline-flex;
  scale: 75%;
  padding-left: 5px;
}

.dica:hover::after {
  content: "✔";
}

/* DICA - FIM */

/* TABELAS - INÍCIO */

.tabela {
  background-color: var(--fundo-conteudo);
  margin: 1em 0;
  border: 0px solid #a2a9b1;
  border-collapse: collapse;
  width: 100%;
}

.tabela > tr > th,
.tabela > tr > td,
.tabela > * > tr > th,
.tabela > * > tr > td {
  border-bottom: 0px solid #a2a9b1;
  padding: 0.2em 0.4em;
  vertical-align: top;
}

.tabela > tr > th,
.tabela > * > tr > th {
  text-align: center;
  background-color: var(--azul-ufsc); 
  color: white; 
  font-weight: bold;
  vertical-align: middle;
}

.tabela > tr > th:first-child,
.tabela > * > tr > th:first-child {
  border-top-left-radius: 6px;
}

.tabela > tr > th:last-child,
.tabela > * > tr > th:last-child {
  border-top-right-radius: 6px;
}

.tabela > caption {
  font-weight:bold
}

.tabela tr:nth-child(2n+1) td {
  background-color: color-mix(in srgb, var(--fundo-pagina-geral), yellow 5%);
}

.tabela-primeira-coluna-destaque td:first-child {
  font-weight: bold;
  text-align: center;
}

/* TABELAS - FIM */

/* DIAGRAMA - INÍCIO */

.diagrama {
  display: grid;
  margin: 10px auto 20px auto;
  padding: 0 0 10px 0;
  overflow: auto;
  max-width: fit-content;
  max-height: fit-content;
  border-radius: 10px;
  background-color: var(--fundo-conteudo);
  scrollbar-width: thin;
  scrollbar-color: var(--azul-ufsc) var(--cor-alerta);
}

.diagrama p:first-child {
  background-color: var(--azul-ufsc);
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
  margin: 0;
  line-height: 2em;
}

.diagrama img {
  max-width: 75px !important;
  height: auto;
}

.diagrama ul {
  padding: 20px 0 0 0; 
  margin: 0;
  position: relative;
  border-radius: 10px;
  display: flex;
  list-style: none;
  transition: all 0.5s;
}

.diagrama li {
  text-align: center;
  list-style-type: none;
  position: relative;
  padding: 20px 5px 0 5px;
  transition: all 0.5s;
}

.diagrama li:only-child {
  padding: 20px 0 0 0;
}

/*
.diagrama > ul > li::before,
.diagrama > ul > li::after {
  border: 0 !important;
}
*/

.diagrama li::before, 
.diagrama li::after {
  content: '';
  position: absolute; 
  top: 0; 
  right: 50%;
  border-top: var(--borda-sombra);
  width: 50%; 
  height: 20px;
}

.diagrama li::after {
  right: auto; 
  left: 50%;
  border-left: var(--borda-sombra);
}

.diagrama li:only-child::after, 
.diagrama li:only-child::before {
  display: none;
}

.diagrama li:only-child { 
  padding-top: 0;
}

.diagrama li:first-child::before, 
.diagrama li:last-child::after {
  border: 0 none;
}

.diagrama li:last-child::before {
  border-right: var(--borda-sombra);
  border-radius: 0 5px 0 0;
}

.diagrama li:first-child::after {
  border-radius: 5px 0 0 0;
}

.diagrama ul ul ul {
  justify-content: center;
}

.diagrama ul ul::before {
  content: '';
  position: absolute; 
  top: 0; 
  left: 50%;
  border-left: var(--borda-sombra);
  width: 0; 
  height: 20px;
}

.diagrama span:target {
  animation: diagrama-visitado 1s infinite;
}

@keyframes diagrama-visitado {
  from { 
    background-color: var(--cor-alerta); 
  } to { 
    background-color: var(--cor-info); 
  }
}

.diagrama-destaque-sim {
  background-color: var(--cor-alerta) !important;
  font-weight: bold;
}

.diagrama li span {
  border: var(--borda-sombra);
  box-shadow: var(--box-sombra);
  padding: 5px 10px;
  text-decoration: none;
  font-size: 11px;
  display: inline-block;
  background-color: var(--cor-info);
  border-radius: 5px;
  transition: all 0.5s;
}

.diagrama li span:hover,
.diagrama li span:hover + ul li span {
  background-color: var(--cor-alerta); 
  border: var(--borda-sombra-hover);
  box-shadow: var(--box-sombra-hover);
}

.diagrama li span:hover + ul li::after,
.diagrama li span:hover + ul li::before,
.diagrama li span:hover + ul::before,
.diagrama li span:hover + ul ul::before {
  border-color: var(--borda);
}

.diagrama-sim,
.diagrama-nao {
  padding-left: 25px !important;
  font-weight: bold;
}

.diagrama-sim::before,
.diagrama-nao::before {
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  transform: translateX(-20px);
  width: 1rem;
  height: 1rem;
  content: "";
}

.diagrama-sim {
  background-color: var(--cor-ok) !important;
}

.diagrama-sim::before {
  background-image: url(https://compras.wiki.ufsc.br/images/1/1b/Ok.png);
}

.diagrama-nao {
  background-color: var(--cor-erro) !important;
}

.diagrama-nao::before {
  background-image: url(https://compras.wiki.ufsc.br/images/5/56/Erro.png);
}
  
/* DIAGRAMA - FIM */

/* BOX ASSUNTOS RELACIONADOS - INÍCIO */

.relacionados {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 200px;
  font-size: 85%;
  z-index: 9999;
}

.relacionados div:first-child {
  line-height: 2;
  margin-bottom: 20px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-image: linear-gradient(to right,white,var(--borda),white) 1;
  text-align: center;
  color: var(--azul-ufsc);
  font-weight: bold;
}

.relacionados div:last-child {
  padding: 10px 10px 10px 0;
}

.relacionados li {
  padding-left: 5px;
}

.relacionados ul,
.relacionados ol {
  list-style: none;
  margin: 0px 0px 0px 25px !important;
}

.relacionados ul li:hover::marker {
  content: "▶";
}

.relacionados ol li::marker,
.relacionados ol li:hover::marker {
  content: "✅";
}

#botao-fechar {
  margin-right: 10px;
  font-weight: initial;
}

/* BOX ASSUNTOS RELACIONADOS - FIM */

/* BOTÕES PARA DOWNLOAD - INÍCIO */

[class^="download-"] a {
  height: 40px;
  padding-left: 40px;
  display: flex;
  align-items: center;
  margin-block: 5px;
  width: fit-content;
}

[class^="download-"] a::before {
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  translate: -40px;
  width: 2rem;
  height: 2rem;
  transition: all .25s ease-in-out;
}

.download-default a::before {
  background-image: url(https://compras.wiki.ufsc.br/images/6/63/Icone_baixar.png);
}

.download-pdf a::before {
  background-image: url(https://compras.wiki.ufsc.br/images/1/10/Icone_pdf.png);
}

.download-doc a::before {
  background-image: url(https://compras.wiki.ufsc.br/images/6/64/Icone_doc.png);
}

.download-planilha a::before {
  background-image: url(https://compras.wiki.ufsc.br/images/f/f0/Icone_planilha.png);
}

.download-default a:hover::before,
.download-pdf a:hover::before {
  filter: drop-shadow(0 0 5px var(--cor-erro));
}

.download-doc a:hover::before {
  filter: drop-shadow(0 0 5px var(--cor-info));
}

.download-planilha a:hover::before {
  filter: drop-shadow(0 0 5px var(--cor-ok));
}

/* BOTÕES PARA DOWNLOAD - FIM */

/* TECLA */

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

/* TECLA - FIM */