@charset "UTF-8";
/* CSS Document */

body { margin: 0; display: flex; justify-content: center; align-items: center; background: #282828; position: relative; color:white }
body, html { width: 100%; height: 100%; }

main { padding-bottom: unset; width: 100%; }
#container_login main { width: 100% }


.container-md { max-width: 720px }
.container-sm { max-width: 576px }
footer { background: #0f0f0f; height: 80px; margin-top: -80px }


.logo-wrapper { position: relative; width: 600px; height: auto; max-width: 100%; transition: all 0.6s ease-in-out; margin: 0 auto; }
.logo-wrapper.shrink-up { width: 300px; transform: translateY(-90px); margin: 0 auto; }

.btn {font-size: 1.1rem; padding-top: .6rem }

#cont_form { width: 100%; max-width: 300px; margin: 0 auto; }

.input-btn-row { display: flex; gap: 5%; width: 100%; }
.input-btn-row input { width: 75%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; }
.input-btn-row button { width: 20%; min-width: 50px; }


.container_login {
  display: flex; flex-direction: column; align-items: center;
}

.logo-wrapper {
  position: relative; width: 600px; height: auto; max-width: 100%; transition: all 0.6s ease-in-out;
}


.logo-wrapper.shrink-up {
    max-width: 300px; transform: translateY(-90px);
}

.logo-wrapper img {
  position: absolute; left: 0; top: 0; width: 100%; opacity: 0;
}

.marchio {
  z-index: 3; animation: scaleFade 0.6s ease-out forwards; animation-delay: 0.2s;
}

.left {
  width: 50%!important; left: 0 !important; z-index: 2; animation: slideInLeft 0.6s ease-out forwards; animation-delay: 0.5s;
}

.right {
  width: 50%!important; left: 50%!important; z-index: 2; animation: slideInRight 0.6s ease-out forwards; animation-delay: 0.5s;
}

.payoff {
  z-index: 1; animation: fadeInUp 1s ease-out forwards; animation-delay: 1.1s;
}

#cont_form { opacity: 0; transform: translateY(20px); transition: all 0.6s ease-in-out; display: flex; flex-direction: column; align-items: left; }
#cont_form.show { opacity: 1; transform: translateY(0); }



#reset_pwd { max-height: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease; opacity: 0; margin-top: 0; }

#reset_pwd.show {
  max-height: 500px; opacity: 1; margin-top: 20px;
}




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

@keyframes slideInLeft {
  0% { transform: translateX(-100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  0% { transform: translateX(100px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeInUp {
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}