:root{
--azzara-primary:#177dff;
}

html,
body{
height:100%;
margin:0;
}

body{
font-family:Arial, Helvetica, sans-serif;
min-height:100vh;
overflow-x:hidden;
position:relative;
background:
radial-gradient(1200px 700px at 16% 12%,rgba(23,125,255,0.16),transparent 62%),
radial-gradient(1000px 620px at 84% 86%,rgba(23,125,255,0.12),transparent 64%),
linear-gradient(138deg,#3f95ff 0%,#2d8bff 42%,var(--azzara-primary) 100%);
background-size:120% 120%,120% 120%,100% 100%;
animation:gradientFlow 36s ease-in-out infinite;
}

body::before,
body::after{
content:'';
position:fixed;
border-radius:50%;
pointer-events:none;
z-index:0;
filter:blur(10px);
}

body::before{
width:420px;
height:420px;
top:-120px;
left:-120px;
background:radial-gradient(circle,rgba(255,255,255,0.12) 0%,rgba(255,255,255,0) 70%);
animation:orbFloatA 42s cubic-bezier(.42,0,.2,1) infinite alternate;
}

body::after{
width:520px;
height:520px;
right:-180px;
bottom:-180px;
background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 72%);
animation:orbFloatB 48s cubic-bezier(.42,0,.2,1) infinite alternate;
}

.container-fluid,
.row{
position:relative;
z-index:1;
}

.container-fluid,
.container-fluid.vh-100,
.row,
.row.h-100,
.login-area,
.welcome-area{
min-height:100vh;
}

/* LOGIN AREA */

.login-area{
background:rgba(255,255,255,0.88);
backdrop-filter:blur(6px);
}

.login-card{
width:100%;
max-width:350px;
padding:40px;
border-radius:10px;
box-shadow:0 20px 45px rgba(0,20,55,0.18);
background:#fff;
position:relative;
padding-top:64px;
border:1px solid #e5edf7;
}

.login-card::before{
content:'';
position:absolute;
top:0px;
left:50%;
transform:translateX(-50%);
width:164px;
height:78px;
border-radius:10px;
background-image:url('../../../assets/images/logoPrecision.png');
background-size:contain;
background-position:center;
background-repeat:no-repeat;
}

/* INPUTS */

.form-control{
height:45px;
border-radius:6px;
}

#password{
padding-right:42px;
}

.password-wrap .show-password{
position:absolute;
top:50%;
right:12px;
transform:translateY(-50%);
width:26px;
height:26px;
display:flex;
align-items:center;
justify-content:center;
color:#7e8ca6;
cursor:pointer;
border-radius:50%;
transition:background-color .2s ease,color .2s ease;
}

.password-wrap .show-password:hover,
.password-wrap .show-password:focus{
background:rgba(23,125,255,0.1);
color:var(--azzara-primary);
outline:none;
}

.password-wrap .show-password i{
font-size:14px;
line-height:1;
}

.btn-primary{
height:45px;
border-radius:6px;
font-weight:600;
background:var(--azzara-primary);
border:none;
display:block;
width:60%;
margin-left:auto;
margin-right:auto;
letter-spacing:.3px;
}

#signIn{
margin-top:-20px !important;
}

.d-grid{
width:100%;
}

#progressBar .progress{
height:7px;
border-radius:999px;
background:rgba(23,125,255,0.12);
overflow:hidden;
}

/* WELCOME AREA */

.welcome-area{
background: linear-gradient(148deg,rgba(23,125,255,0.22),rgba(23,125,255,0.16));
display:flex;
align-items:center;
justify-content:center;
color:white;
text-align:center;
position:relative;
overflow:hidden;
}

/* efeito decorativo */

.welcome-area::before{
content:'';
position:absolute;
width:260px;
height:260px;
background:rgba(255,255,255,0.09);
border-radius:50%;
top:40px;
right:40px;
animation:moveBallA 40s ease-in-out infinite alternate;
}

.welcome-area::after{
content:'';
position:absolute;
width:180px;
height:180px;
background:rgba(255,255,255,0.08);
border-radius:50%;
bottom:40px;
left:40px;
animation:moveBallB 46s ease-in-out infinite alternate;
}

.welcome-area .welcome-text{
animation:textFadeIn .9s ease-out both;
}

.welcome-text{
position:relative;
z-index:2;
}

.welcome-text h2{
font-weight:700;
margin-bottom:10px;
}

.logo-maggiore{
width:78px;
height:auto;
vertical-align:middle;
margin-left:4px;
}

@keyframes gradientFlow{
0%{background-position:0% 0%,100% 100%,0% 50%;}
50%{background-position:6% 5%,94% 95%,0% 50%;}
100%{background-position:0% 0%,100% 100%,0% 50%;}
}

@keyframes orbFloatA{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(10px,7px) scale(1.015);}
100%{transform:translate(18px,12px) scale(1.025);}
}

@keyframes orbFloatB{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(-8px,-5px) scale(1.015);}
100%{transform:translate(-14px,-10px) scale(1.02);}
}

@keyframes moveBallA{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(-6px,4px) scale(1.01);}
100%{transform:translate(-3px,2px) scale(1.005);}
}

@keyframes moveBallB{
0%{transform:translate(0,0) scale(1);}
50%{transform:translate(5px,-3px) scale(1.01);}
100%{transform:translate(2px,-1px) scale(1.005);}
}

@keyframes textFadeIn{
from{opacity:0;transform:translateY(6px);}
to{opacity:1;transform:translateY(0);}
}

@media (max-width:768px){
.login-card{
padding-top:72px;
}

.login-card::before{
width:180px;
height:86px;
}
}

@media (prefers-reduced-motion: reduce){
body,
body::before,
body::after,
.welcome-area::before,
.welcome-area::after{
animation:none;
}
}

/* RESPONSIVO */

@media(max-width:991px){

.welcome-area{
display:none;
}

.login-card{
margin:20px;
padding-top:96px;
}

.login-card::before{
width:176px;
height:62px;
top:22px;
}

}