|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", |
|
|
"Lucida Sans", Arial, sans-serif; |
|
|
background-color: rgb(74, 125, 245); |
|
|
background-image: radial-gradient( |
|
|
at 7% 96%, |
|
|
hsla(194, 98%, 50%, 1) 0px, |
|
|
transparent 70% |
|
|
), |
|
|
radial-gradient(at 77% 30%, hsla(303, 90%, 50%, 1) 0px, transparent 15%), |
|
|
radial-gradient(at 1% 39%, hsla(324, 100%, 50%, 1) 0px, transparent 50%), |
|
|
radial-gradient(at 78% 90%, hsla(295, 95%, 51%, 1) 0px, transparent 30%), |
|
|
radial-gradient(at 22% 87%, hsla(253, 100%, 50%, 1) 0px, transparent 30%), |
|
|
radial-gradient(at 34% 74%, hsla(240, 100%, 50%, 1) 0px, transparent 80%); |
|
|
} |
|
|
|
|
|
button { |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
form { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: space-between; |
|
|
flex: 1; |
|
|
} |
|
|
/* ///////////////////////////////////////////////////// */ |
|
|
|
|
|
.no-style { |
|
|
all: unset; |
|
|
display: block; /* Para garantir que a imagem seja exibida como um bloco */ |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
} |
|
|
|
|
|
.return { |
|
|
display: flex; |
|
|
justify-content: start; |
|
|
align-items: center; |
|
|
margin: 5px; |
|
|
cursor: pointer; |
|
|
width: -webkit-fill-available; |
|
|
} |
|
|
|
|
|
/* Container de login */ |
|
|
.container-home { |
|
|
width: 100%; |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
overflow-y: hidden; |
|
|
} |
|
|
|
|
|
.box { |
|
|
background-color: white; |
|
|
padding: 12px; |
|
|
border-radius: 6px; |
|
|
min-width: 20%; |
|
|
height: 65vh; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
animation: transform 0.3s ease-out; |
|
|
} |
|
|
|
|
|
.box:hover { |
|
|
transform: scale(1.005); |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.box .box-content-1 { |
|
|
text-decoration: none; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: start; |
|
|
width: 100%; |
|
|
padding: 10px; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.box-content-1 h1 { |
|
|
color: #2d69f5; |
|
|
margin-bottom: 80px; |
|
|
} |
|
|
|
|
|
.box-content-1 h4 { |
|
|
color: #2d69f5; |
|
|
} |
|
|
|
|
|
.box .box-content-1 select, |
|
|
.options { |
|
|
border: #e7e7e7 solid 1px; |
|
|
width: 280px; |
|
|
padding: 10px; |
|
|
border-radius: 7px; |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.box .box-content-1 .group { |
|
|
width: 100%; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: start; |
|
|
color: #818181; |
|
|
padding: 3px; |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.box .box-content-1 .group span { |
|
|
font-size: 13px; |
|
|
padding: 5px; |
|
|
} |
|
|
|
|
|
.box .box-content-2 { |
|
|
margin: 30px 0 10px 0; |
|
|
} |
|
|
|
|
|
.fo-info { |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.fo-info p { |
|
|
font-size: 12px; |
|
|
color: #aaaaaa; |
|
|
font-weight: 200; |
|
|
} |
|
|
|
|
|
.fa-solid.fa-user { |
|
|
width: max-content; |
|
|
height: min-content; |
|
|
padding: 10px; |
|
|
border-radius: 0 12px 12px 12px; |
|
|
background-color: transparent; |
|
|
} |
|
|
|
|
|
.fa-solid.fa-key { |
|
|
width: max-content; |
|
|
height: max-content; |
|
|
padding: 10px; |
|
|
border-radius: 0 12px 12px 12px; |
|
|
background-color: transparent; |
|
|
color: #2d69f5; |
|
|
} |
|
|
|
|
|
.esqueci-senha { |
|
|
display: flex; |
|
|
justify-content: end; |
|
|
align-items: center; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.esqueci-senha > a { |
|
|
color: #858585; |
|
|
font-size: small; |
|
|
text-decoration: none; |
|
|
padding: 8px; |
|
|
} |
|
|
|
|
|
:root { |
|
|
overflow-y: hidden; |
|
|
} |
|
|
/* ///////////////////////////////////////////////////// */ |
|
|
|
|
|
/* Menu de redes sociais */ |
|
|
.menu { |
|
|
width: 100%; |
|
|
font-weight: bolder; |
|
|
display: flex; |
|
|
align-items: end; |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.social { |
|
|
color: #8aa2ff; |
|
|
margin: 2vh; |
|
|
transition: transform 0.3s; |
|
|
background-color: #f1f1f1; |
|
|
border-radius: 10px; |
|
|
padding: 10px 14px; |
|
|
} |
|
|
|
|
|
.social:hover { |
|
|
transform: scale(1.15); |
|
|
} |
|
|
/* ///////////////////////////////////////////////////// */ |
|
|
|
|
|
/* Bot<EFBFBD>o de envio */ |
|
|
.bn-login { |
|
|
width: 100%; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: end; |
|
|
} |
|
|
|
|
|
.bn632-hover { |
|
|
border-radius: 10px; |
|
|
font-size: 14px; |
|
|
font-weight: 600; |
|
|
color: #fff; |
|
|
cursor: pointer; |
|
|
height: 40px; |
|
|
width: 75%; |
|
|
text-align: center; |
|
|
border: none; |
|
|
background-size: 300% 100%; |
|
|
-o-transition: all 0.6s ease-in-out; |
|
|
-webkit-transition: all 0.6s ease-in-out; |
|
|
transition: all 0.6s ease-in-out; |
|
|
} |
|
|
|
|
|
.bn632-hover:hover { |
|
|
background-position: 100% 0; |
|
|
-moz-transition: all 0.4s ease-in-out; |
|
|
-o-transition: all 0.4s ease-in-out; |
|
|
-webkit-transition: all 0.4s ease-in-out; |
|
|
transition: all 0.4s ease-in-out; |
|
|
} |
|
|
|
|
|
.bn632-hover:focus { |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.bn632-hover.bn24 { |
|
|
background-image: linear-gradient( |
|
|
to right, |
|
|
#2d69f5, |
|
|
#ff007a, |
|
|
#6664f1, |
|
|
rgb(249, 5, 78) |
|
|
); |
|
|
}
|
|
|
|