:root {
  --livingToursColor: #E10A0A;
}
body {
    margin: 0;
    padding: 0;
    background: url('img/teste2.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 40vh;
    position: relative;
    background-color: #d9d9d938;
}
/* Estilos da navbar */
#navbar {
  background-color: var(--livingToursColor) !important;
}
/* Estilos do botão da navbar */
.navbutton {
  background-color: var(--livingToursColor);
  display: block;
  width: 100%;
  padding: 5px;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: -1%
}
/* Estilos da navbar logo */
#navbar .watermarkP2 {
  width: 12%;
}
img.watermarkP2 {
  width: 45%;
  margin-left: -76%;
  margin-top: -15%;
}
h4.infoinscricao {
  margin-bottom: 19%;
  margin-top: -17%;
  color: #1dc700;
  background-color: #ffffff00;
  width: 8%;
  margin-left: 47%;
  border-radius: 5px;
  font-size: 20px;
  padding: 3px;
}
/* Estilos do botão de logout */
.btn-logout {
  display: block;
  width: 100%;
  background-color: #E10A0A;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: -1%;
  margin: auto;
  font-size: large;
  margin-left: 55%;
  margin-top: -4%;
}
/* Estilo do conteiner de login */
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 85vh;
}
img.logologin {
  width: 14%;
  margin-left: 0%;
  margin-top: -1%;
  padding: 27px;
}
.login-container {
  background: rgba(137, 159, 184, 0.6);
  border-radius: 20px;
  box-shadow: 0 0 2px rgb(0 0 0);
  padding: 37px;
  width: 55%;
  margin: 50px auto;
  height: 382px;
}
.titlelogin {
  font-size: 24px;
  color: #333;
  text-align: center;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}
#login-button {
  display: block;
  width: 100%;
  padding: 5px;
  background-color: #E10A0A;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-bottom: -1%;
  margin: auto;
}
h2.titlelogin {
  color: white;
}
label {
  display: inline-block;
  margin-bottom: 0.5rem;
  color: white;
}
img.logologinnav {
  width: 9%;
  padding: 1px;
  margin-left: 11px;
}
nav.navbar {
  background-color: #00000042;
}
/* Estilo relativo ao navbar e suas opçoes */
img.nav-imageLogo {
  width: 12%;
  margin-top: -1%;
  padding: 14px;
}
button.btn.btn-logout {
  margin-left: 2%;
  width: 90%;
  background-color: #E10A0A;
  padding: 6px;
  border-radius: 13px;
}
button.navbar-toggler {
  margin-right: -26%;
  margin-top: -1%;
}
/* Estilo relativo ao texto de boas vindas */
.centered {
  padding: 20px;
  text-align: center;
  font-size: 4rem;
  /* /color: whitesmoke; */
  color: #ccc;
  text-align: center;
  letter-spacing: 5px;
  text-transform: capitalize;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
}
nav.navbar.navbar-dark.bg-dark {
  border-radius: 12px;
  border: none;
  width: 20%;
  width: 21%;
  height: 5%;
}
.login-container.card {
  border-radius: 15px;
  background-color: #00000096;
  color: white;
  text-align: center;
  font-family: system-ui;
  margin-top: 7%;
}
.centered {
  text-align: center;
}
img {
  width: 7%;
  padding: 10px;
}
.titleevent {
  font-family: 'YourPreferredFont', sans-serif;
  font-size: 40px;
  color: #fff;
  background-color: #00000085;
  padding: 12px;
  border-radius: 25px;
  height: 50%;
  width: 50%;
  margin: auto;
  margin-top: 5%;
}
/* Estilo relativo ao conteiner e ao botão de login */
.bottom-content {
  margin-top: 5%;
  padding: 20px;
  text-align: center;
  /* Centraliza o conteúdo na div */
}
.bottom-content button {
  padding: 0px 29px;
  font-size: 22px;
  background-color: var(--livingToursColor);
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 16px;
  width: 14%;
  height: 6%;
  transition: all 0.3s ease;
  margin-top: -16%;
  margin-left: 2%;
}
.bottom-content button:hover {
  font-size: 28px;
  width: 18%;
  height: 8%;
}
button.navbar-toggler {
  margin-left: 6%;
  margin-top: -12px;
}
/* Estilos do conteiner do acordião */
.accordion-conteiner {
  width: 80%;
  margin-top: 2%;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid gray;
  border-radius: 4px
}
.accordianFlushContent {
  margin: 10 10 10 10;
}
/* Fim dos estilos do arcordião */
/* Estilos do formulário de criação de sorteios */
form#alter-Form {
  background-color: #ffffff;
  padding: 25px;
  border-radius: 12px;
  max-width: 60%;
  max-width: 50%;
  box-shadow: 0px 11px 16px rgba(0, 0, 0, 35%);
  color: rgb(0, 0, 0);
  margin: auto;
}
#alter-Form label {
  color: black !important;
}
/* Estilos do botão de criação de sorteios */
#createNewSorteio {
  margin-top: 5%;
  left: 85%;
  display: flex;
  position: relative;
}
/* Estilos da tela de loading */
/* Estilos para o loading screen */
.loading-screen {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* fundo com transparência */
  backdrop-filter: blur(5px);
  /* efeito de desfoque */
  text-align: center;
}
.loading-spinner {
  margin-top: 30%;
  /* ajuste para o centro vertical */
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  /* Ajuste o tamanho do círculo conforme necessário */
  height: 80px;
  /* Ajuste o tamanho do círculo conforme necessário */
  border: 8px solid #ff0000;
  /* Cor vermelha para o círculo */
  border-top: 8px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}