@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Inter-Medium.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/Inter-Bold.woff2") format("woff2"); }


body {
  display: flex;
  flex-direction: column;
  font-family: Inter, sans-serif;
  margin: 0;
  .pagina-container {
    .pagina-principal {
      .linha-form {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
      }
      .acoes {
        text-align: center;
      }
      .campo {
        flex: 1;
        min-width: 250px;
      }
      .campo label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
      }
      .codigo-group {
        display: flex;
        gap: 5px;
      }
      .codigo-group input {
        max-width: 120px;
        text-align: center;
      }
      input[type="text"] {
        width: 100%;
        padding: 8px;
        font-size: 16px;
        box-sizing: border-box;
      }
      button {
        padding: 10px 25px;
        border-radius: 0px;
        font-family: Inter, sans-serif;
        cursor: pointer;
        font-size: inherit;
        line-height: inherit;
        align-items: center;
      }
    }
  }
}

body.acesso-pelo-site {
  .container-cabecalho {
    display: none;
  }
  .pagina-container{
    margin: 20px auto;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;

    .pagina-principal {
      max-width: 900px;
      .titulo {
        font-size: 22px;
        text-align: center;
        margin-bottom: 20px;
      }
      button {
        color: #000;
        border: 1px solid #dcdcdc;
        background-color: #fff;
      }
      button:hover {
        background-color: #dcdcdc;
      }
    }
  }
  .pagina-footer {
    display: none;
  }
}

body.acesso-fora-site {
  color: #1b305a;
  height: -webkit-fill-available !important;
  background: #e6ecf0;

  .container-cabecalho {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 64px;
    width: 100%;
    padding: 2px 16px;
    background: #fff;
    flex-direction: row;
    box-sizing: border-box;
    white-space: nowrap;
    & img {
      height: 49px;
      width: 126px;
      content: url('../image/tre-mg.svg');
    }
  }

  .pagina-container{
    display: flex;
    align-items: center;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 16px;

    .pagina-principal {
      flex: 1 1 auto;
      max-width: 1000px;
      padding: 20px;
      border-radius: 10px;
      background-color: #fff;
      .titulo {
        text-align: center;
        font-size: 1.65rem;
        margin-bottom: 80px;
      }
      .texto {
        font-size: 1rem;
      }
      .acoes{
        margin-top: 50px;
        & button {
          color: #0c2345;
          background-color: #fff;
          border: 1px solid #dcdcdc;
        }
        & button:hover {
          background-color: #0c2345;
          color: #fff;
        }
      }
    }
  }
  .pagina-footer {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 25px;
    color: #fff;
    background-color: #0c2345;
  }
}

@media (max-width: 650px) {
  body.acesso-fora-site {
    & .pagina-container {
      padding: 5px;
        & .pagina-principal {
          padding: 5px 10px;
          border-radius: 0px;
          #frmConfirmacao{
            margin-bottom: 0px;
          }
          .linha-form {
            gap: 5px;
          }
          .titulo {
              font-size: 1rem;
              margin-bottom: 20px;
          }
          .texto {
            font-size: 0.8rem;
          }
          .acoes{
            margin-top: 10px;
          }
        }
    }
    .pagina-footer {
      font-size: 0.75rem;
      gap: 5px;
      padding: 5px 10px;
    }
  }
  .codigo-group {
    justify-content: space-between;
  }
  .codigo-group input {
    max-width: 80px;
  }
  .linha-form {
    flex-direction: column;
  }
  button {
    width: 100%;
  }
}