a {
  color: var(--cor-texto);
  font-weight: normal;
  padding: 0;
  margin: 0;

  &:hover {
    color: var(--cor-texto);
    cursor: pointer;
  }
}

#header {
  display: flex;
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  z-index: 100;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff !important;
  /* box-shadow: 0 0 15px rgba(200, 200, 200, 0.9); */
  box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);

  & * {
    /* font-family: "Poppins"; */
    margin: 0;
  }

  & .header-left {
    display: flex;
    align-items: center;
    gap: 25px;

    & .botoes-icone {
      display: flex;
      align-items: center;

      & .botao {
        display: flex;
        align-items: center;
      }
    }

    & picture.logo-self {
      height: 45px;
      display: block;

      & img {
        display: block;
        height: 100%;
        width: auto;
      }
    }
  }

  & .header-right {
    & .primeiro-nome {
      display: none;
    }
  }

  & .header-right2 {
    display: flex;
    align-items: center;
    gap: 10px;

    & #showTime {
      display: flex;
      width: 100px;
      height: 40px;
      justify-content: center;
      align-items: center;
      border-radius: calc(40px / 2);
      background-color: #7cff87;

      &.sessao-expirada {
        background-color: #ff7c7c;
      }

      &:hover {
        filter: brightness(0.95);
      }
    }

    & .perfil {
      position: relative;
      background-color: #f1f2f7;
      border-radius: calc(50px / 2);
      box-shadow: 0 2px 5px rgba(100, 100, 100, 0.3);

      & .botao-menu-usuario {
        display: flex;
        align-items: center;
        gap: 15px;
        padding-right: 20px;
        padding-left: 5px;
        height: 50px;
        border-radius: calc(50px / 2);
        overflow: hidden;
        position: relative;
        /* transition: 0.2s ease-in-out; */
        z-index: 5;

        & .foto-perfil {
          width: 40px;
          height: 40px;
          display: block;
          border-radius: 50%;
          overflow: hidden;
          background-color: #fff;
          box-shadow: 0 0 2px rgba(100, 100, 100, 0.5);

          & img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
          }
        }

        & .descricao {
          display: flex;
          flex-direction: column;
          gap: 5px;
          justify-content: center;
          /* transition: 0.2s ease-in-out; */
        }

        & .seta {
          /* transition: 0.2s ease-in-out; */
          color: var(--cor-texto-header);
        }

        &::before {
          content: "";
          position: absolute;
          background-color: var(--cor-principal);
          height: 100%;
          width: 100%;
          top: 0;
          left: -100%;
          z-index: -1;
          /* transition: 0.2s ease-in-out; */
          border-radius: calc(50px / 2); /* Metade da altura */
        }

        &:hover {
          & .descricao,
          & .seta {
            color: var(--cor-texto-principal);
          }

          &::before {
            left: 0;
          }
        }

        &.active {
          border-radius: calc(50px / 2) calc(50px / 2) 0 0;

          & .descricao,
          & .seta {
            color: var(--cor-texto-principal);
          }

          &::before {
            left: 0;
            border-radius: calc(50px / 2) calc(50px / 2) 0 0; /* Metade da altura */
          }
        }

        /* Animação de voltar o botão vai esperar o menu fechar */
        &:not(.active, :hover) {
          &::before,
          & .descricao,
          & .seta {
            /* transition-delay: 0.2s; */
          }
        }
      }

      & #menu-usuario {
        position: absolute;
        width: 100%;
        overflow: hidden;
        top: 50%;
        left: 0;
        border-radius: 0 0 calc(50px / 2) calc(50px / 2); /* Metade da altura do botão */
        padding: 0;
        background-color: var(--cor-principal);
        /* transition: 0.2s ease-in-out; */

        & .menu:has(li) {
          padding-top: 5px;

          & menu {
            border-top: 2px solid var(--cor-principal-clara);
            border-bottom: 2px solid var(--cor-principal-clara);
            display: flex;
            flex-direction: column;
            padding: 5px 0;
            margin: 0 10px;

            & li {
              & a {
                display: flex;
                align-items: center;
                gap: 10px;
                color: var(--cor-texto-principal);
                padding: 5px 15px;
                /* transition: 0.2s ease-in-out; */

                &:hover {
                  text-decoration: underline;
                }
              }
            }
          }
        }

        & .sair {
          display: flex;
          gap: 20px;

          & a {
            padding: 15px 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--cor-texto-principal);
            width: 100%;
            /* transition: 0.2s ease-in-out; */

            &:hover {
              background-color: var(--cor-principal-clara);
            }
          }
        }

        & > * {
          margin-top: -300px;
          /* transition: 0.2s ease-in-out; */
        }
      }

      & .botao-menu-usuario.active + #menu-usuario {
        top: 100%;

        & > * {
          margin: 0;
        }
      }
    }

    & .botao {
      background: transparent;
      padding: 0;
      margin: 0;
      border: none;
      font-size: 1.3rem;
      cursor: pointer;

      &.seta {
        font-size: 1rem;
      }
    }
  }

  & div:has(> .mostra-notificacoes) {
    display: flex;
    align-items: center;
    height: 40px;

    & .mostra-notificacoes {
      display: flex;
      height: 35px;
      width: 35px;
      font-size: 1.5rem;
      position: relative;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      &.active {
        /* background-color: var(--cor-principal-hover) !important; */
        /* color: white; */
      }

      & .badge-notification {
        position: absolute;
        top: -5px;
        right: -5px;

        display: none;
        align-items: center;
        justify-content: center;
        padding: 0 3px;
        border-radius: 10px;
        height: 15px;
        min-width: 15px;
        background-color: var(--cor-principal-hover);
        font-size: 0.7rem;
        color: white;
      }
    }
  }
}

#area-notificacoes {
  display: flex;
  flex-direction: column;
  max-height: 350px;
  width: 350px;
  max-width: 350px;

  position: fixed;
  top: 65px;
  right: 15px;
  z-index: 1001;

  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  box-shadow: var(--shadow);
  border: 1px solid rgba(100, 100, 100, 0.1);
  border-radius: 0 0 calc(45px / 2) calc(45px / 2);

  &:not(.active) {
    right: calc(-1 * 350px);
  }

  & header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(100, 100, 100, 0.1);
    padding: 15px;
    padding-bottom: 10px;

    & * {
      font-size: 1rem;
    }

    & .contador {
      padding: 3px 10px;
      border-radius: 15px;
      background-color: var(--cor-principal-hover);
      color: var(--cor-texto-principal);
    }
  }

  & > div {
    display: flex;
    flex-direction: column;
    width: 350px;
    max-width: 350px;
    padding: 0 15px;
    gap: 10px;

    & header {
      padding-left: 0;
      padding-right: 0;
    }
  }

  & .notificacao {
    display: flex;
    gap: 10px;
    background-color: white;
    align-items: center;
    position: relative;

    &.nova {
      margin: -10px -15px 0 -15px;
      padding: 15px;
      background-color: var(--cor-principal-hover);

      & * {
        color: white !important;
      }
    }

    &:not(:last-child) {
      border-bottom: 1px solid rgba(100, 100, 100, 0.1);
      padding-bottom: 10px;
    }

    &:hover {
      transform: scale(1.01);
    }

    & .icone {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 35px;
      min-height: 35px;
      width: 35px;
      min-width: 35px;
      border-radius: 10px;
      background-color: #f1f1f1;

      &.recebido {
        background-color: rgb(103, 204, 103);
        color: white;
      }

      &.enviado {
        background-color: rgb(82, 121, 227);
        color: white;
      }
    }

    & .foto {
      display: block;

      --size: 45px;
      min-height: var(--size);
      height: var(--size);
      max-height: var(--size);
      min-width: var(--size);
      width: var(--size);
      max-width: var(--size);

      align-items: center;
      justify-content: center;

      border-radius: 10px;
      background-color: #f1f1f1;
      position: relative;

      & img {
        width: 100%;
        height: 100%;
        border: none;
        object-fit: cover;
        border-radius: 10px;
      }

      & .icone-acao {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 3px;
        right: 3px;
        transform: translateX(50%) translateY(50%);
        background-color: #fff;
        border-radius: 50%;
        min-height: 25px;
        height: 25px;
        min-width: 25px;
        width: 25px;

        &.verde {
          color: rgb(103, 204, 103);
        }

        &.azul {
          color: rgb(103, 155, 204);
        }

        &.amarelo {
          color: rgb(255, 200, 0);
        }
      }
    }

    & .info {
      display: flex;
      flex-direction: column;
      gap: 5px;
      width: 100%;

      & .conteudo {
        font-size: 0.9rem;
      }

      & .horario {
        display: flex;
        gap: 10px;
        font-size: 0.8rem;
        color: #555;
        justify-content: right;
      }
    }
  }
}

#side-bar {
  grid-area: side-bar;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background-color: var(--cor-bg-menu-lateral);
  z-index: 30;
  box-shadow: 3px 0px 3px rgba(100, 100, 100, 0.1);
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 40px;

  min-height: calc(100svh - 65px);
  height: calc(100svh - 65px);
  max-height: calc(100svh - 65px);
  overflow-y: auto;
  overflow-x: hidden;

  /* Quando o menu tá aberto */
  & > nav {
    /* Base para os menus */
    & menu {
      margin: 0;
      padding: 0;

      & li {
        & .botao-menu-lateral {
          display: flex;
          height: 45px;
          padding: 10px;
          gap: 15px;
          align-items: center;
          background-color: #fff;
          color: var(--cor-texto-menu-lateral);
          border-top-right-radius: calc(45px / 2); /* Metade da altura */
          border-bottom-right-radius: calc(45px / 2); /* Metade da altura */
          border: none;
          cursor: pointer;

          &:not(:last-child) {
            margin-bottom: 5px;
          }

          &:hover {
            background-color: #f3f3f3;
          }

          & .icone {
            width: 20px;
            display: flex;
            text-align: center;
            align-items: center;
            justify-content: center;

            &:not(:nth-child(3)) {
              color: var(--cor-principal);
              height: 27px;
              width: 27px;
            }
          }

          & .texto {
            flex: 1;
            text-align: left;
            max-width: 160px;
            padding-right: 10px;
          }

          /* &.active { */
          &:hover {
            background-color: var(--cor-principal) !important;
            color: var(--cor-texto-principal) !important;

            & .icone {
              color: var(--cor-texto-principal) !important;
            }

            &:hover {
              background-color: var(--cor-principal-clara) !important;
            }
          }
        }

        & button {
          min-width: 100%;
        }

        /* Sub menus */
        & menu {
          overflow: hidden;

          &:not(.active, :hover) {
            display: none;
          }
        }

        .badge {
          margin-left: 7px;
        }
      }
    }
  }

  /* Quando o menu tá fechado */
  &:not(.active) {
    padding-right: 5px;
    padding-left: 5px;
    scrollbar-width: none !important;

    &::-webkit-scrollbar {
      width: 0 !important; /* Remove a largura da barra */
      height: 0 !important; /* Remove a altura da barra, se for horizontal */
      background: transparent !important; /* Faz ela "sumir" */
    }

    &::-webkit-scrollbar-thumb {
      background-color: transparent !important;
    }

    & > nav {
      & menu {
        &.menu-principal {
          & li {
            & *:is(a, button) {
              width: 45px;
              padding: 0;
              /* align-items: center; */
              justify-content: center;
              position: relative;
              /* border-radius: 50%; */

              & .texto,
              & .icone:last-child {
                display: none;
              }

              &::before {
                content: "";
                display: block;
                height: 100%;
                width: 20px;
                position: absolute;
                top: 0;
                left: -20px;
                background-color: #fff;
                transition: all 0.25s ease;
              }

              &:hover {
                &::before {
                  background-color: var(--cor-principal-clara);
                }
              }
            }
          }
        }

        & menu {
          display: none;
        }
      }
    }
  }
}

#main {
  grid-area: main;
  padding: 20px;
  max-width: 100%;
  overflow-x: hidden;

  & .conteudo-modulo {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
    min-height: 100%;

    & > header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      padding-bottom: 10px;
      flex-wrap: wrap-reverse;
      gap: 20px;

      .breadcrumb {
        display: flex;
        height: 45px;
        width: fit-content;
        min-width: max-content;
        gap: 10px;
        padding: 0 20px;
        border-radius: 25px; /* Metade da altura */
        background-color: #fff;
        align-items: center;
        box-shadow: var(--shadow);
        border: 1px solid rgba(0, 0, 0, 0.1);
        margin-bottom: 0 !important;

        & a:hover {
          text-decoration: underline;
          color: var(--cor-principal);
        }
      }
    }

    & h1 {
      all: unset !important;
      font-size: 1.75rem !important;
    }
  }

  & .tabelas {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 15px;

    & .bloco {
      border-radius: calc(45px / 2);
      padding: 10px;
      box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
      border: 1px solid rgba(100, 100, 100, 0.1);
      background-color: #f6f6f6;
    }

    &:not(.column) {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(590px, 1fr));
    }
  }

  & .area-tabela {
    display: flex;
    flex-direction: column;
    gap: 20px;

    & .filtro {
      --padding: 5px;
      --base-height: 45px;

      height: calc(var(--base-height) + var(--padding) * 2);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: white;
      padding: var(--padding);
      padding-left: calc((var(--base-height) + var(--padding)) / 2);
      border-radius: calc((var(--base-height) + var(--padding)) / 2);
      border: 1px solid rgba(100, 100, 100, 0.1);
      box-shadow: var(--smooth-shadow);

      & .pesquisa-box {
        display: flex;
        align-items: center;
        gap: 15px;

        & .selection {
          --height: 45px;

          height: var(--height) !important;
          display: flex;
          align-items: center;
          border: 2px solid var(--cor-cinza) !important;
          border-radius: calc(var(--height) / 2);

          &.ui.active.dropdown:not(.pointing):not(.floating),
          &.ui.active.upward.dropdown:not(.pointing):not(.floating),
          &.ui.upward.dropdown.visible:not(.pointing):not(.floating) {
            border-radius: unset;
          }

          &:not(.upward) {
            &.active {
              border-top-left-radius: calc(var(--height) / 2) !important;
              border-top-right-radius: calc(var(--height) / 2) !important;
            }

            & .menu.transition {
              border-bottom-left-radius: calc(var(--height) / 2) !important;
              border-bottom-right-radius: calc(var(--height) / 2) !important;
            }

            & input {
              height: var(--height);
            }

            & .text {
              color: var(--cor-texto) !important;
            }

            & .dropdown.icon {
              top: 50% !important;
              transform: translateY(-50%) !important;
              margin: 0 -0.78571429em 0 0;
              padding: 0 0.91666667em 0 0;
            }
          }

          &.upward {
            &.active {
              border-bottom-left-radius: calc(var(--height) / 2) !important;
              border-bottom-right-radius: calc(var(--height) / 2) !important;
            }

            & .menu.transition {
              border-top-left-radius: calc(var(--height) / 2) !important;
              border-top-right-radius: calc(var(--height) / 2) !important;

              border-bottom-left-radius: 0 !important;
              border-bottom-right-radius: 0 !important;
            }

            & input {
              height: var(--height);
            }

            & .text {
              color: var(--cor-texto) !important;
            }

            & .dropdown.icon {
              top: 50% !important;
              transform: translateY(-50%) !important;
              margin: 0 -0.78571429em 0 0;
              padding: 0 0.91666667em 0 0;
            }
          }
        }
      }
    }

    &.cor-principal {
      & .filtro {
        background-color: var(--cor-principal);
        color: var(--cor-texto-principal);
      }
    }

    &:has(.row):not(:has(.bottom)) {
      padding: 0 15px !important;
    }

    & [id$="_filter"] {
      & label {
        position: relative;

        & .input {
          margin: 0;

          & input {
            height: 45px;
            border-radius: calc(45px / 2); /* Metade da altura */
            padding-right: 35px;
          }
        }

        & .icone-pesquisa {
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 1rem;
        }
      }
    }

    & [id$="_info"] {
      padding-left: 10px;
    }

    & [id$="_wrapper"] {
      /* Esse aqui é o elemento que abraça a tabela que lista os dados,
        por isso é melhor partir dela até chegar aos elementos da tabela
        em si */
      display: flex;
      flex-direction: column;
      gap: 15px;

      & > div {
        gap: 10px;
      }

      & .row {
        padding: 0 !important;

        & > * {
          padding: 0 !important;
        }
      }

      & .row:first-child {
        /* Primeira div do datatables */

        &:has(.botao-adicionar, .botao-datatables) {
          /* Se tiver um botao de adicionar, ele vai mostrar,
                caso não tenha, volta ao padrão */

          all: unset;
          display: grid;
          grid-template-columns: repeat(3, auto);
          grid-template-areas: "botao-adicionar qtd-itens pesquisa";
          align-items: center;
          justify-content: space-between;

          & > * {
            all: unset;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100% !important;
          }

          & #div-botoes-datatables {
            gap: 5px;
          }

          & .botao-adicionar,
          & .botao-datatables {
            grid-area: botao-adicionar;
          }
        }

        & [id$="_length"] {
          & > label {
            display: flex;
            display: none;
            align-items: center;
            gap: 10px;

            & > div {
              height: 45px;
              border-radius: calc(45px / 2); /* Metade da altura */
              display: flex;
              align-items: center;
              width: fit-content;

              & i {
                top: 50% !important;
                transform: translateY(-50%) !important;
                margin: 0;
                padding: 0;
              }

              & .menu {
                border-bottom-left-radius: calc(45px / 2);
                border-bottom-right-radius: calc(45px / 2);
              }
            }
          }
        }

        & [id$="_filter"] {
          & input {
            width: 250px;
          }
        }
      }

      & table {
        border-radius: 15px !important;
        background: none;
        border-spacing: 0 10px;
        margin-top: -10px !important;
        margin-bottom: -10px !important;
        border: none;
        text-align: center;
        border-collapse: separate;

        --border-radius: calc(46.2px / 2); /* 50% da altura da linha */

        & thead {
          & tr {
            box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
            border-radius: var(--border-radius);
            border: 1px solid #ddd !important;

            & th {
              /* background-color: var(--cor-cinza-claro); */
              border: none;
              padding: 10px !important;
              font-weight: bold;
              background-color: #fff;
            }

            & th:first-child {
              border-top-left-radius: var(--border-radius) !important;
              border-bottom-left-radius: var(--border-radius) !important;
            }

            & th:last-child {
              border-top-right-radius: var(--border-radius) !important;
              border-bottom-right-radius: var(--border-radius) !important;
            }
          }
        }

        & tbody {
          & .botoes-acao {
            display: flex;
            width: fit-content;
            gap: 5px;

            & .botao {
              height: 35px;
              width: 35px;
              /* border-radius: 5px; */
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: var(--cor-principal);
              border: none;
              color: var(--cor-texto-principal);
              transition: 0.2s ease-in-out;
              cursor: pointer;

              &:hover {
                background-color: var(--cor-principal-clara);
              }

              & * {
                margin: 0;
              }
            }
          }

          & tr {
            box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
            border-radius: var(--border-radius);
            border: 1px solid #ddd !important;

            & td {
              background-color: #fff;
              border: none;
              padding: 5px 10px !important;
              vertical-align: inherit !important;
              font-size: 1rem !important;
            }

            & td:first-child {
              border-top-left-radius: var(--border-radius) !important;
              border-bottom-left-radius: var(--border-radius) !important;
            }

            & td:last-child {
              border-top-right-radius: var(--border-radius) !important;
              border-bottom-right-radius: var(--border-radius) !important;
            }

            &:hover {
              & td {
                background-color: var(--cor-cinza-claro);
              }
            }
          }
        }
      }

      & [id$="_paginate"] {
        --tam: 40px;

        & li {
          all: unset;
          width: fit-content !important;
          cursor: pointer !important;
        }

        & a,
        .ellipsis {
          all: unset !important;
          height: var(--tam) !important;
          padding: 0 10px !important;
          min-width: 25px !important;
          border: 1px solid rgb(236, 236, 236) !important;
          display: inline-flex !important;
          align-items: center !important;
          justify-content: center !important;
          box-shadow: var(--shadow) !important;
          background-color: #fff !important;
          color: black !important;

          &:not(.disable):hover {
            background-color: #f7f7f7 !important;
          }
        }

        & [id$="_previous"] {
          margin: 0 !important;
          border-top-left-radius: calc(var(--tam) / 2) !important;
          border-bottom-left-radius: calc(var(--tam) / 2) !important;

          & a {
            margin: 0 !important;
            padding: 0 20px !important;
            border-top-left-radius: calc(var(--tam) / 2) !important;
            border-bottom-left-radius: calc(var(--tam) / 2) !important;
          }
        }

        & [id$="_next"] {
          margin: 0 !important;
          border-top-right-radius: calc(var(--tam) / 2) !important;
          border-bottom-right-radius: calc(var(--tam) / 2) !important;

          & a {
            margin: 0 !important;
            padding: 0 20px !important;
            border-top-right-radius: calc(var(--tam) / 2) !important;
            border-bottom-right-radius: calc(var(--tam) / 2) !important;
          }
        }
      }
    }

    & .dataTables_scrollBody {
      & thead {
        display: none;
      }
    }

    & .dataTables_scroll {
      display: flex;
      flex-direction: column;
      /* gap: 10px; */

      & thead {
        & tr {
          & th {
            padding: 10px 0 !important;
          }
        }
      }
    }

    &
      table.dataTable.dtr-inline.collapsed
      > tbody
      > tr[role="row"]
      > td:first-child:before,
    table.dataTable.dtr-inline.collapsed
      > tbody
      > tr[role="row"]
      > th:first-child:before {
      left: auto !important;
    }
  }

  & .acesso-rapido {
    background-color: #ffffff99;
    border: 1px solid #ffffffcc;
    width: 100%;
    display: flex;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 3px 3px rgba(100, 100, 100, 0.1);
    border: 1px solid #eee;

    & .botao {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: var(--cor-principal) !important;
      flex: 1;
      gap: 10px;
      padding: 10px;
      position: relative;
      border-radius: 10px;

      &:hover {
        background-color: rgba(100, 100, 100, 0.1);
      }

      &::after {
        content: "";
        position: absolute;
        right: 0;
        height: 70%;
        width: 1px;
        background-color: var(--cor-principal);
      }

      &:last-child::after {
        display: none;
      }

      & .icone {
        font-size: 3rem;
      }
    }
  }
}

#alert-container {
  position: fixed;
  top: 75px;
  right: 1rem;
  z-index: 1005;

  & .my-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 1rem;
    background-color: var(--cor-secundaria);
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(100, 100, 100, 0.1);
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.3s, transform 0.3s;

    &.show {
      opacity: 1;
      transform: translateY(0);
    }

    & .close-btn {
      cursor: pointer;
      background: none;
      border: none;
      color: #fff;
      font-size: 16px;
    }
  }
}

#setas-scroll {
  display: flex;
  flex-direction: column;
  gap: 5px;

  position: absolute;
  right: 15px;
  bottom: 20px;

  & button {
    --size: 35px;
    height: var(--size);
    width: var(--size);
    background-color: var(--cor-secundaria);
    color: white;
    cursor: pointer;
    box-shadow: var(--shadow);
    border-radius: calc(var(--size) / 2);
    border: none;

    &:hover {
      background-color: var(--cor-secundaria-hover);
    }
  }
}

@media only screen and (max-width: 900px) {
  #main {
    & .acesso-rapido {
      & .botao {
        & .icone {
          font-size: 2rem;
        }
      }
    }
  }
}

@media only screen and (max-width: 700px) {
  body {
    &:has(> header) {
      grid-template-areas:
        "header header"
        "main main";
    }
  }

  & .header-right {
    & .saudacao,
    .nome-completo {
      display: none;
    }

    & .primeiro-nome {
      display: inline !important;
    }
  }

  #side-bar {
    position: fixed;
    /* top: 65px; */
    left: 0;
    bottom: 0;
    min-height: calc(100svh - 55px);
    height: calc(100svh - 55px);
    max-height: calc(100svh - 55px);
    overflow-y: auto;
    overflow-x: hidden;

    &:not(.active) {
      display: none;
    }

    & .active {
      max-width: 100%;
    }
  }

  #main {
    padding: 10px;

    & .conteudo-modulo {
      & > header {
        & .breadcrumb {
          width: 100%;
        }
      }
    }

    & .area-tabela {
      .esconde-mobile {
        display: none;
      }

      & .filtro {
        padding-left: 5px;

        & .contador-box {
          display: none;
        }

        & .filtro-box {
          width: 100%;

          & .pesquisa-box {
            width: 100% !important;

            & .campo-pesquisa {
              width: 100% !important;

              & .busca-datatables {
                width: 100% !important;
              }
            }
          }
        }
      }
    }

    & .tabelas {
      flex-direction: column;
    }
  }
}