:root {
  --tamanho-menu : 460px;
  --opcoes-hover : rgb(235, 230, 230);
  --triangulo    : polygon(0% 100%, 50% 0%, 100% 100%);
  --perigo       : rgb(238, 70, 67);
  --aviso        : rgb(67, 74, 81);
  --menu         : rgba(90, 149, 200, 0.353);
  --hint         : rgba(0, 0, 0, 0.7);
}

body {
  font-size : 1.8rem;
  margin    : 0;
}

main {
  flex-direction : row;
  display        : flex;
}

*:focus {
  outline: 0;
}


button {
  border-radius : 4px;
  font-weight   : bold;
  padding       : 2.7px 8px;
  border        : 0;
  color         : white;
}


input[type="text"] {
  padding-bottom : 2px !important;
  vertical-align : middle;
  margin-right   : 4px;
  font-family    : 'Times new Roman';
  background     : white;
  text-align     : end;
  font-size      : inherit;
  position       : relative;
  padding        : 0;
  border         : none;
  bottom         : 2px;
  color          : inherit;
  width          : 21px;
}

input::placeholder {
  color: rgb(136, 136, 136);
}


#acoes {
  background : var(--menu);
  position   : relative;
  height     : 50px;
}


#acoes-congruencias {
  font-size : 2.2rem;
  position  : absolute;
  z-index   : 1;
  color     : white;
  left      : 12px;
  top       : 9px;
}

#acoes-congruencias > #menu-opcoes.escondido {
  display: none;
}

#menu-opcoes {
  border-bottom : 0 !important;
  font-family   : sans-serif;
  background    : white;
  font-size     : 1.2rem;
  position      : absolute;
  display       : block;
  z-index       : 1;
  border        : 1px solid #c0ccda;
  height        : 120.6px;
  color         : var(--hint);
  width         : 300px;
  left          : -7.5px;
  top           : 45px;
}

#menu-opcoes::before {
  background : white;
  clip-path  : var(--triangulo);
  position   : absolute;
  display    : block;
  content    : '';
  z-index    : 1;
  height     : 15px;
  width      : 30px;
  left       : 5px;
  top        : -10px;
}

#menu-opcoes:has(> span:first-child:hover)::before {
  background: var(--opcoes-hover);
}

#menu-opcoes > span {
  border-bottom : 1px solid #c0ccda;
  user-select   : none;
  text-align    : center;
  display       : block;
  padding       : 10px;
  cursor        : pointer;
}

#menu-opcoes > span:hover {
  background: var(--opcoes-hover);
}

#menu-opcoes > span.desabilitado {
  background : rgb(192, 192, 192);
  cursor     : not-allowed;
}


#calcular {
  user-select : none;
  background  : inherit;
  font-size   : 1.5rem;
  position    : absolute;
  padding     : 4px 7px;
  cursor      : pointer;
  height      : 40px;
  bottom      : 5px;
  border      : 0;
  color       : white;
  width       : 150px;
  right       : 0;
}

#calcular:disabled {
  filter: brightness(90%);
  cursor: not-allowed;
}

#calcular:hover {
  background: rgba(90, 149, 200, 0.502);
}


#menu {
  flex-direction : column;
  border-right   : 1px solid rgb(219, 219, 219);;
  box-sizing     : border-box;
  position       : relative;
  display        : flex;
  height         : 100vh;
  width          : var(--tamanho-menu);
}


#sistemas {
  flex-grow : 1;
  overflow  : auto;
  width     : calc(100% + 1px);
}


.congruencia {
  background : white;
  position   : relative;
  border     : 1px solid #c0ccda;
  height     : 50px;
}

.congruencia:focus-within {
  border: 1px solid rgb(90, 149, 200);
}

.congruencia:focus-within > .relatorio-erro > span > i {
  color: white;
}

.congruencia > * {
  vertical-align: middle;
}

.congruencia > i:not(.lixeira) {
  position : relative;
  bottom   : 3px;
}

.congruencia:focus-within > .relatorio-erro {
  background: rgb(120, 172, 218);
}

.congruencia:focus-within > .relatorio-erro::before {
  color: white;
}


.relatorio-erro {
  margin-right : 5px;
  background   : rgba(90, 149, 200, 0.353);
  position     : relative;
  display      : inline-flex;
  height       : 100%;
  width        : 12%;
  top          : 0;
}

.relatorio-erro::before {
  font-family : inherit;
  font-weight : bold;
  font-size   : 16px;
  content     : attr(data-id);
  margin      : 2px 0 0 3px;
  color       : rgb(67, 74, 81);
}

.relatorio-erro > span {
  position : absolute;
  right    : 11px;
}

.relatorio-erro > span:has(> .fa-exclamation-triangle) {
  top: 15px;
}

.relatorio-erro > span:has(> .fa-info-circle) {
  font-size : 2rem;
  top       : 13px;
}

.relatorio-erro > span:hover::after {
  border-radius : 5px;
  background    : var(--hint);
  font-family   : sans-serif;
  font-size     : 1.1rem;
  position      : absolute;
  content       : attr(data-hint);
  display       : block;
  padding       : 5px;
  z-index       : 1;
  color         : white;
  width         : 200px;
  left          : -5px;
  top           : 38px;
}

.relatorio-erro > span:hover::before {
  background : var(--hint);
  clip-path  : var(--triangulo);
  position   : absolute;
  content    : '';
  display    : block;
  z-index    : 1;
  height     : 10px;
  width      : 20px;
  left       : 4px;
  top        : 28px;
}


.lixeira {
  font-size : 18px !important;
  position  : absolute;
  cursor    : pointer;
  color     : var(--perigo);
  right     : 3px;
  top       : 3px;
}

.lixeira:hover {
  filter: brightness(92%);
}


#resultados {
  background-color : var(--menu);
  flex-direction   : column !important;
  box-sizing       : content-box;
  max-width        : calc(100vw - var(--tamanho-menu));
  flex-grow        : 1;
  position         : relative;
  padding          : 50px 20px 20px 20px;
  display          : flex;
  height           : calc(100vh - 70px);
  gap              : 10px;
}

#resultados::before {
  font-family : sans-serif;
  font-weight : bold;
  position    : absolute;
  content     : 'Resultados do TCR';
  color       : rgba(67, 74, 81, 0.653);
  left        : 30px;
  top         : 10px;
}

#resultados > * {
  background-color : white;
  border-radius    : 5px;
}

#resultados:has(> #canonizar.display) > #passo-a-passo {
  height: 65%;
}


#canonizar {
  overflow-y : auto;
  display    : none;
}

#canonizar.display {
  display : block;
  height  : 35%;
}


#passo-a-passo {
  background-color : white;
  box-sizing       : content-box;
  overflow         : auto;
  height           : 100%;
}


.titulo-secao {
  margin-bottom : 10px;
  font-family   : sans-serif;
  background    : rgba(112, 160, 144, 0.746);
  font-size     : 1.5rem;
  font-weight   : bold;
  margin-left   : 3px;
  margin-top    : 5px;
  display       : inline-block;
  padding       : 0 10px;
  color         : white;
}


.descricao-secao {
  font-family : sans-serif;
  margin-left : 3px;
  font-size   : 1.5rem;
}


.explicacao {
  margin-bottom : 15px;
  text-align    : center;
  margin-top    : 7px;
  display       : block;
}


.lista-nao-coprimos {
  margin-bottom   : 5px !important;
  line-height     : 1.5;
  margin          : auto;
}

.lista-nao-coprimos td:not(:last-child) {
  padding-right: 15px;
}

.aviso {
  color: var(--aviso) !important;
}


.perigo {
  color: var(--perigo);
}


.margem-acima {
  margin-top: 40px;
}