:root {
  --transition: all 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  background-color: rgba(55, 40, 90, 0.945);
  position: relative;
   height: 100vh;
   padding:0;
   margin:0;
   overflow: scroll;
   animation: fadeUp 1.0s ease-out forwards;
   overflow-x: hidden;
   transform: scale(0.8);
}


.cabecalho img {
  width: 100px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.cabecalho img:hover {
  transform: scale(1.1);
}

.menu img:hover {
  transform: scale(1.1);
}

.menu button:hover,
.page-options button:hover {
  transform: scale(1.1);
}

.menu button, .menu img,
.page-options button {
  display: inline-block;
  
  transition: transform 0.3s ease;
}


.cabecalho {
  background: linear-gradient(to bottom, #553491, #776ec2cb);
align-items: center;
align-items: center;
padding: 30px;
width: 100%;
height: 250px;
box-shadow: 4px 4px 5px; color: rgb(39, 39, 39);
flex-direction: column;
position: relative;
overflow: hidden;
gap: 05px;
z-index: 2;
font-size: 20px;
}

.page-title {
  margin-top: 90px;
  margin-bottom: 30px;
  font-size: 20px;
  color: rgba(240, 240, 240, 0.87);
  text-align: center;
}

.menu {
align-items: center;
background: rgba(116, 93, 168, 0.815);
padding: 30px;
width: 100%;
height: 100px;
box-shadow: 5px 5px 10px; color: rgba(0, 0, 0, 0.418);
flex-direction: column;
position: relative;
overflow: hidden;
}

.menu button {
  background: none;
  border: none;
  color: rgba(22, 22, 22, 0.904);
  font-size: 23px;
  cursor: pointer;
  padding: 15px 20px;
}

.menu img {
  margin-bottom: -4px;
}

.page-options {
background: rgba(116, 93, 168, 0.815);
padding: 10px 20px;
height: 95px;
box-shadow: 5px 5px 10px; color: rgba(0, 0, 0, 0.418);
overflow: hidden;
margin: 0 auto;
width: 100%;
display: flex;
justify-content: center;
}

.conteúdo {
  
  align-items: center;
  max-width: 1500px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  box-shadow: 5px 5px 10px; color: rgba(0, 0, 0, 0.418);
}


.page-options button {
  background: none;
  border: none;
  color: rgb(39, 39, 39);
  font-size: 25px;
  align-items: center;

  cursor: pointer;
  padding: 30px 20px;
}

.page-info {
  margin-top: -50px;
  font-size: 40px;
  color: rgb(185, 185, 185);
  padding: 60px 20px;
}

.page-info2 {
  margin-top: 20px;
  font-size: 25px;
  color: rgb(185, 185, 185);
  padding: 30px 20px;
  margin-right: 40px;
}

.page-info3 {
  color: white;
  padding: 10px 0;
  margin-top: 10px;
}

.nomeantes {
  color: white;
  padding: 10px 0px;
}

.motivo {
  color: white;
}

.nome {
  margin-top: 90px;
  font-size: 30px;
  color: rgb(155, 155, 155);
}

input,
select {
  width: 100%;
  max-width: 400px;
  padding: 10px 15px;
  margin-top: 8px;
  margin-bottom: 20px;
  border: 2px solid #ffffff90;
  border-radius: 8px;
  background-color: transparent;
  color: #fff;
  font-size: 16px;
  outline: none;
}

input::placeholder {
  color: #ffffff88;
}

input:focus,
select:focus {
  border-color: #88aaff;
  background-color: rgba(255, 255, 255, 0.05);
}

select option {
  background-color: rgb(54, 35, 78);
  color: white;
}

.campo {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

input,
select {
  width: 100%;
  padding: 10px 15px;
  margin-top: 8px;
  border: 2px solid #ffffff90;
  border-radius: 8px;
  background-color: transparent;
  color: white;
  font-size: 16px;
}

.linha {
  color: white;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.campo {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}

.caixinhas {
  display: flex;
  margin-top: 15px;
}

.caixinhas label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border-radius: 8px;
  margin-right: 45px;
}

.checkbox-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  color: white;
}

.butao {
  margin-bottom: 50px;
}

.botao {
  cursor: pointer;
  font-size: 17px;
  line-height: 2.0;
  border: none;
  border-radius: 6px;
  padding: 6px 9px;
  font-weight: 550;
  box-shadow: 2px 2px 7px;
  position: relative;
  background-color: #ada5ceb4;
  
  transition: background-color 0.2s ease;
  
  margin-left: 760px;
}

.botao:hover {
  background-color: #b3a3e4;
}