@import url('https://fonts.googleapis.com/css2?family=Urbanist&display=swap');
.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
  --bs-offcanvas-width: 15%!important; 
}
#background {
    height: 100vh; 
    width: 100%;
    background-color: black;
    background-repeat: round;
    background-size: 100%;
    z-index: -1;
    position: relative;
    }

.adm-center {
  height: 3rem;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
}
.adm-btn {
  padding: 0.1em 0.7em;
  align-items: center;
  display: flex;
}
.admin-drop:hover, .admin-drop:focus {
  background-color: #299549;
}
    .tooltipo {
      position: relative;
      display: inline-block;
      cursor: pointer;
    }
  
    .tooltipo .tooltiptexto {
      visibility: hidden;
      width: 120px;
      font-size: 12px;
      color: #fff;
      border-radius: 6px;
      padding: 5px;
      }
  
    .tooltipo:hover .tooltiptexto {
      visibility: visible;
      opacity: 1;
    }

    .navbar.navbar-expand-lg {
    position: absolute;
    z-index: 10;
    width: 100%;
    display: none!important;
    }
    

  @media (max-width: 800px) {
    #card-background {
      display: none!important;
    }
    .main-register, .main-edit {
      height: auto;
      width: auto;
    }
    #formAdmin-login {
      width: 35vh;
     }

     .admin-list{
      background-color: rgba(26, 26, 26, 0.58)!important;
     }

     .img-2 {
      display: none;
     }
     .divForm-Register {
      padding: 30px!important;
      width: 90%!important;
    }
    .register-container, .select-container {
      width: 90%!important;
    }

    .content-register {
      width: 100vw;
    }
    .relatorio {
      width: 100%!important;
    }

    .navbar.fixed-right.side-close {
      display: none;
    }
    .navbar.navbar-expand-lg{
      display: flex!important;
      background-color: rgb(0 0 0 / 82%);
      position: fixed;
      border-bottom: #ff8200 solid 1px;
      border-radius: 0 0 1rem 1rem;
    }

    .navbuttons {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .nav-link {
      display: flex;
      align-items: center;
    }
    .dropdown-menu.show{
      background-color: rgb(0 0 0 / 82%);
    }

    .Consolidado {
      margin-top: 6rem;
    }
    .dropend .dropdown-menu[data-bs-popper] {
      position: absolute;
      top: 0;
      right: auto;
      left: 65%;
    }
    .main-register, .main-select, .main-edit {
      width: 65vw;
    }
  }
  #select-section, #register-section{
    width: 100%;
  }
  #card-background {
     display: flex;
     flex-direction: column;
     justify-content: center;
     background: -webkit-linear-gradient(270deg, #2995498f 0%, #d4c6158c 100%);
     padding: 200px 20px;
     height: 100%;
     border-radius: 0 10px 10px 0;
     width: 50%;
     animation: grow 0.5s ease-out;
  }

    .btn-stanza, .btn-outline-stanza {
      font-family: 'Urbanist', sans-serif;
    }

    .title-page{
      font-family: 'Nanum Gothic Coding', monospace, bold;
      font-weight: bold;
      font-size: 90px;
      margin-top: 25px;
      cursor: context-menu;
      color: #ff8200;
      
      text-align: center;
    }

    .navbar-brand:focus, .navbar-brand:hover {
      color: #c465ff;
    }

    @media (min-width: 800px) {

    .container-fluid.d-flex.justify-content-center {
        max-width: 1250px;
        width: 100%;
        height: 75vh;
        display: flex;
        flex-direction: row;
        -webkit-box-align: center;
        align-items: center;
        padding: 0px;
    }
    .navbar-toggler, .nav-item {
    width: 100%;  
    }
    .adm-center {
      top: 0;
      
    }
  }
    .login-container, .select-container, .profile-container, .register-container {
      display: flex;
      flex-direction: row;
      -webkit-box-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      align-items: center;
      }
    .balls-background {
      position: fixed;
      left: 0px;
      top: 0px;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      background-color: black;
      filter: blur(20px);
      z-index: 0;
    }
    .ball {
      position: absolute;
      background-image: -webkit-linear-gradient(4deg, #299549 0%, #d4c615 100%);
      border-radius: 50%;
    }

    .ball-1 {
      position: absolute;
      width: 5vh;
      height: 3vh;
      bottom: 8%;
      left: 13%;
  }
  
  
    .ball-2 {
      width: 15vh;
      height: 15vh;
      top: -3%;
      right: 50%;
      box-shadow: inset 0 -2px 10px rgb(255 255 255);
  }


    .ball-3 {
      width: 5vh;
      height: 5vh;
      top: 32%;
      left: 5%;
      box-shadow: inset 5px 0 10px rgb(255 255 255);
  }


    .img {
      position: absolute;
      -webkit-filter: drop-shadow(0px -10px 5px white);
      filter: drop-shadow(0px -10px 5px white);
    }
    .img-1 {
      width: 25vh;
      height: 15vh;
      top: 5%;
      left: 27%;
    }
    .img-2 {
      width: 50vh;
      height: 30vh;
      top: 10%;
      right: 2%;
    }
    .img-3 {
    width: 40vh;
    height: 24vh;
    bottom: 4%;
    left: 2%;
    }
    .content-login, .content-select, .content-profile, .content-register{
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
      background-color: rgba(0, 0, 0, 0.1);
      filter: blur(0);
  }

  .main-login, .main-register, .main-select, .main-edit {
    border-radius: 10px;
    background-color: #ffffff0f;
    box-shadow: 0 .5rem 1rem rgb(136 233 165 / 38%) !important;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding: 0;
    justify-content: center;
  }

  
  .divForm-login{
    padding: 100px 30px 100px 30px;
    min-width: 50%;
  }

  .divForm-Register {
    padding: 3vh 3vw 3vh 3vw;
    width: 100%;
    z-index: 3;
  }

  .login-form {
    width: 70%;
  }
  .login-form, .signup-form {
    display: flex;
    flex-direction: column; 
  }
  .logo-title {
    display: flex;
    flex-direction: column; 
  }

  .relatorio {
    padding: 30px; 
    width: 50%;
    z-index: 3;
  }

    
body {
    background-color: black;
  }


.text-stanza {
  color: #299549;
  text-shadow: none!important;
}


.btn-outline-stanza {
    --bs-btn-color: #ff8200;
    --bs-btn-border-color: #ff8200;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ff8200;
    --bs-btn-hover-border-color: #ff8200;
    --bs-btn-focus-shadow-rgb: 25,135,84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ff8200;
    --bs-btn-active-border-color: #ff8200;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ff8200;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #ff8200;
    --bs-gradient: none;
}
.btn-stanza{--bs-btn-color: #fff;--bs-btn-bg: #299549;--bs-btn-border-color: #299549;--bs-btn-hover-color: #fff;--bs-btn-hover-bg: #2ab353;--bs-btn-hover-border-color: #aba016;--bs-btn-focus-shadow-rgb: 66,70,73;--bs-btn-active-color: #fff;--bs-btn-active-bg: #aba016;--bs-btn-active-border-color: #aba016;--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color: #fff;--bs-btn-disabled-bg: #299549;--bs-btn-disabled-border-color: #299549;}
.btn-roxo {
  --bs-btn-color: #fff;
  --bs-btn-bg: #299549;
  --bs-btn-border-color: #299549;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #25ad4d;
  --bs-btn-hover-border-color: #23833f;
  --bs-btn-focus-shadow-rgb: 66,70,73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #25ad4d;
  --bs-btn-active-border-color: #2fb958;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #299549;
  --bs-btn-disabled-border-color: #299549;
}
.form-control {
  border: 0px!important;
  background: none!important;
  outline: none!important;
  padding: 10px 20px;
  border-radius: 9999px;
  box-shadow: inset -6px 6px 10px rgb(255 255 255 / 25%) !important;
  color: #fff;
}
.form-control::placeholder {
color: #767676;
}

.form-control:focus{
  --bs-body-color: #ffffffb5
}

.form-label {
font-size: 0.9rem
}

#ToggleMode, #ToggleModeMobile {
  background-color: #000000 !important;
  background-image: url('../img/moon.png') !important;
}
#ToggleMode:checked, #ToggleModeMobile:checked{
 background-color: white!important;
 border-color: #ffe4a4;
 background-image: url('../img/sun.png') !important;
}
.label-checkbox {
  opacity: 1;
}

.mb-2.d-flex {
  justify-content: space-between;
}

.navbar.fixed-right {
  width: 7vh;
  background-color: black;
  z-index: 2;

}

.offcanvas.offcanvas-end {
  top: 0!important;
}

.offcanvas.show:not(.hiding), .offcanvas.showing {
    transform: none!important;
}

.side-close {
  flex-direction: column;
}

#menu {
  top: 2%;
  position: absolute;
}

.material-symbols-outlined{
  font-size: 0;
}

.container-fluid.justify-content-center {
  height: 99vh;
  z-index: 3;
  align-content: space-between;
}

.blur.balls-background {
  filter: blur(1px);
  /* -webkit-filter: blur(1px); */
  z-index: 1;
  width: 7vh;
}

.blur.balls-background.show {
  width: 15%!important;
}


.material-symbols-outlined.show {
  margin-right: 15px;
}


.dropdown-menu.dropdown-menu-dark.show {
  background-color: rgba(0, 0, 0, 0.7)!important;
  border: solid #ffffff3d 1px;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: #d4c615 !important;
}

.offcanvas.offcanvas-end.show {
   width: 15%; 
}

.offcanvas-body {
  display: flex;
  flex-direction: column;
}



.p-bi {
  color: #299549;
  justify-content: center;
  display: flex;
  align-items: baseline;
}

.ball-4 {
  position: absolute;
    width: 15vh;
    height: 15vh;
    bottom: 10%;
    left: 25%;
    -webkit-filter: drop-shadow(0px -2px 0px white);
    filter: drop-shadow(0px -2px 0px white);
}




.ball-5 {
  width: 15vh;
    height: 15vh;
    top: 45%;
    right: 50%;
    box-shadow: inset 0 -2px 10px rgb(255 255 255);
}

.ball-6 {
  width: 5vh;
    height: 5vh;
    top: 45%;
    left: 30%;
    box-shadow: inset 5px 0 10px rgb(255 255 255);
}
.ball-7 {
  position: absolute;
  width: 10vh;
  height: 10vh;
  top: 10%;
  right: -10%;
  -webkit-filter: drop-shadow(0px -2px 0px white);
  filter: drop-shadow(0px -2px 0px white);
}

.offcanvas-body, .offcanvas-header {
  z-index: 2;
}

.container.justify-content-center.d-flex {
  gap: 3vh;
  flex-direction: column;
}

#preview-image {
  cursor: pointer;
  border-radius: 50%;
}

#salvar {
  width: 100%;
}

.displayAreaViewport {
  background: radial-gradient(circle, rgb(155 207 56) 85%, rgb(255 255 255) 100%)!important;
  background-size: cover!important;
  background-attachment: fixed!important;
  background-repeat: no-repeat!important;
}

td {
  color: #299549;
  height: 100%;
  vertical-align: middle;
}

td > div {
  display: flex!important;
  justify-content: center;
}

*::-webkit-scrollbar {
  width: 5px!important;
  height: 5px!important;
}

*::-webkit-scrollbar-track {
  background:  transparent!important;
  padding: 2px!important;
}

*::-webkit-scrollbar-thumb {
  background-color: #6e52bf69!important;
  border-radius: 5px;
}

@keyframes grow {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}


.navbar-toggler, .nav-item {
  --linear-gradient1: #ffffff0f;
  --linear-gradient2: #ffffff29;
  --glow: #ffffff42;
  --text-color: transparent!important;
  --animation: pulse512 1.5s infinite;
  padding: 0.4em;
  justify-content: center;
  display: flex;
  border-radius: 0.375rem;
}

.btn-stanza {
  --linear-gradient1: #299549;
  --linear-gradient2: #d4c615;
  --glow: #299549b0;
  --text-color: rgba(255, 255, 255, 0.785);
  --animation: pulse512 1.5s infinite;
  padding: 0.4em;
}

.btn-roxo {
  --linear-gradient1: #299549;
  --linear-gradient2: #79d415;
  --glow: #d4c61575;
  --text-color: rgba(255, 255, 255, 0.785);
  --animation: pulse512 1.5s infinite;
}
.btn-stanza:disabled {
  --linear-gradient1: #2995496b;
  --linear-gradient2: #d4c6157a;
  --text-color: #dbdbdb99; /* cor do texto quando desativado */
  cursor: not-allowed;
}

.btn-stanza:disabled:hover {
  --animation: none;
}
.btn-roxo:disabled {
  --linear-gradient1: #6e52bf8f;
  --linear-gradient2: #9d86e380;
  --text-color: #dbdbdb99; /* cor do texto quando desativado */
  cursor: not-allowed;
}

.btn-roxo:disabled:hover {
  --animation: none;
}

a.navbar-toggler, a.nav-item, a.btn-roxo, button {
  border: none;
  color: var(--text-color);
  background-image: linear-gradient(30deg, var(--linear-gradient1), var(--linear-gradient2));
  border-radius: 20px;
  background-size: 100% auto;
  font-family: inherit;
  padding: 0.4vh 1vh;
  justify-content: center;
  display: flex;
}

a.navbar-toggler:hover, a.nav-item:hover, a.btn-roxo:hover, button:hover {
  background-position: right center;
  background-size: 200% auto;
  --text-color: white;
  -webkit-animation: var(--animation); /* correção na duração do pulso */
  animation: var(--animation);
}

.navbar-toggler {
  border: none!important;
}

.navbar-toggler:focus, .navbar-toggler:focus-visible  {
  box-shadow: none;
}

@keyframes pulse512 {
  0% {
    box-shadow: 0 0 0 0 var(--glow);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(218, 103, 68, 0%);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(218, 103, 68, 0%);
  }
}

svg {
  vertical-align: unset!important;
}

.change-password {
  padding: .375rem .75rem;
  box-shadow: inset 1px 2px 10px rgb(5, 5, 5)!important;
}


.toggle-switch.admin{
  --bg-check: #d4c615;
  --box-shadow: #e8ce14;
}

.toggle-switch {
  --bg-check: #299549;
  --box-shadow: #3c9a58;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 1em;
  cursor: pointer;
  opacity: 1!important;
}

.toggle-switch input[type="checkbox"] {
  display: none;
}

.toggle-switch-background.admin {
  background-color: rgba(255, 30, 0, 0.813);
  box-shadow: inset 0 0 0 2px #f00;
}

.toggle-switch-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;
  border-radius: 20px;
  box-shadow: inset 0 0 0 2px #ccc;
  transition: background-color 0.1s ease-in-out;
}

.toggle-switch-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 1em;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: transform 0.1s ease-in-out;
}

.toggle-switch::before {
  position: absolute;
  top: -25px;
  right: -35px;
  font-size: 12px;
  font-weight: bold;
  color: #aaa;
  text-shadow: 1px 1px #fff;
  transition: color 0.1s ease-in-out;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-handle {
  transform: translateX(45px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2), 0 0 0 3px var(--bg-check);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background {
  background-color: var(--bg-check);
  box-shadow: inset 0 0 0 2px var(--box-shadow);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch:before {
  color: var(--bg-check);
  right: -15px;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-switch-background .toggle-switch-handle {
  transform: translateX(1rem);
}

.dropend .dropdown-toggle::after {
    vertical-align: 0;
    margin: 0;
}

svg {
  height: 3vh;
  width: 3vh;
}

.table-responsive {
  height: 60vh;
}

.shadow {
    box-shadow: 0 .5rem 1rem rgb(136 233 165 / 47%) !important;
}