@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;500;600;700&display=swap");
:root {
  /*********** ICON ***********/
  --icon-user: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(63 58 58)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>');
  --icon-password: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(63 58 58)"><g fill="none"><path d="M0 0h24v24H0V0z"/><path d="M0 0h24v24H0V0z" opacity=".87"/></g><path d="M20 8h-3V6.21c0-2.61-1.91-4.94-4.51-5.19C9.51.74 7 3.08 7 6v2H4v14h16V8zm-8 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM9 8V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9z"/></svg>');
  /* Icon select method 2fa */
  --icon-app: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(63 58 58)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M18 1H5v22h13V1zm-6.5 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/></svg>');
  --icon-sms: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="none" stroke="none" stroke-width="2"><path d="M0 0h24v24H0V0z" fill="none"/><path stroke="rgb(63 58 58)" stroke-width="2" d="M22 2H2v20l4-4h16V2zM9"/></svg>');
  --icon-email: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(63 58 58)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M22 4H2.01L2 20h20V4zm-2 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/></svg>');
  /* Icon status login */
  --icon-completed: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(0 85 139)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  --icon-completed-mobile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(255 255 255)"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>');
  --icon-current: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(0 85 139)"><path d="M24 24H0V0h24v24z" fill="none"/><circle cx="12" cy="12" r="8"/></svg>');
  --icon-next: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="rgb(255 255 255)"><path d="M24 24H0V0h24v24z" fill="none"/><circle cx="12" cy="12" r="8"/></svg>');
  /*********** COLOR ***********/
  --red-error: #bb2727;
  --green-success: #05561c;
  --blue-default: #00558B;
  --gray: #e9e9ed;
  --gray-border: #8f8f9d;
}

body {
  margin: 0;
  font-family: "Kumbh Sans", sans-serif;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  100% {
    opacity: 1;
  }
  0% {
    opacity: 0;
  }
}
.remove-spinner::before {
  animation: fadeOut 1s;
  -webkit-animation: fadeOut 1s;
  -moz-animation: fadeOut 1s;
}

.spinner::before {
  content: " ";
  position: fixed;
  display: grid;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5333333333);
  animation: fadeIn 0.25s;
  -webkit-animation: fadeIn 0.25s;
  -moz-animation: fadeIn 0.25s;
  background-image: url(../hyper/images/loading_spinner.gif);
  background-repeat: no-repeat;
  background-position: center;
  background-size: max(80px, min(10vh, 10vw));
  z-index: 10;
  color: white;
  font-size: 5vw;
  align-items: center;
  overscroll-behavior: contain;
  text-align: center;
}

.btn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--gray);
  color: #fff;
  padding: 0.6rem;
  border-radius: 0px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--gray-border);
}

/***************************************
************ CLASSI  STATUS ************
****************************************/
/*********** SESSION EXPIRED ************/
.status-session {
  display: none;
}

.session-expired .container-steps-login {
  display: none;
}
.session-expired .section-left {
  background-color: var(--red-error);
}
.session-expired .container-company-and-steps .second-title {
  color: #fff;
}
.session-expired .status-session {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f2bfbf;
  border: 1px solid var(--red-error);
  color: var(--red-error);
  padding: 0.5rem;
  text-align: center;
}
.session-expired .status-session .title {
  font-size: 1.1rem;
  color: var(--red-error);
  font-weight: 500;
}
.session-expired .status-session .description {
  font-size: 0.9rem;
  color: var(--red-error);
}

/*********** SEC VIOLATION ************/
.container-text-sec-violation {
  display: none;
}

.sec-violation .container-login {
  display: none;
}
.sec-violation .section-left {
  background-color: var(--red-error);
}
.sec-violation .section-left .container-company-and-steps .container-steps-login {
  display: none;
}
.sec-violation .section-left .container-company-and-steps .second-title {
  color: #fff;
}
.sec-violation .container-text-sec-violation {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  height: 100%;
  align-items: center;
}
.sec-violation .container-text-sec-violation .title {
  font-size: 1.5rem;
  color: var(--red-error);
  font-weight: 500;
}
.sec-violation .container-text-sec-violation .description {
  font-size: 1rem;
  color: var(--red-error);
}

/*********** STATUS EMAIL ************/
.status-message {
  display: none;
  padding: 0.5rem;
  border: 1px solid;
  font-weight: 500;
  color: #fff;
}

.status-message.fail {
  display: block;
  background-color: #f2bfbf;
  border-color: var(--red-error);
  color: var(--red-error);
  font-size: 0.9rem;
}

.status-message.ok {
  display: block;
  background-color: #d3fbd8;
  border-color: var(--green-success);
  font-size: 0.9rem;
  color: var(--green-success);
}

.status-message.fail::before, .status-message.ok::before {
  content: attr(data-message);
}

.status-email {
  display: none;
  padding: 0.5rem;
  border: 1px solid;
  font-weight: 500;
  color: #fff;
}
.status-email.lostpwdfail {
  display: block;
  background-color: #f2bfbf;
  border-color: var(--red-error);
  color: var(--red-error);
  font-size: 0.9rem;
}
.status-email.lostpwdfail::before {
  content: "Email non corretta o non trovata. Contattare l'assistenza";
}
.status-email.lostpwdok {
  display: block;
  background-color: #d3fbd8;
  border-color: var(--green-success);
  font-size: 0.9rem;
  color: var(--green-success);
}
.status-email.lostpwdok::before {
  content: "Email inviata correttamente";
}

/********************************
************ GENERAL ************
*********************************/
button {
  cursor: pointer;
}
button:hover {
  opacity: 0.8;
}

input[type=text],
input[type=email],
input[type=number],
input[type=password] {
  padding: 1rem 0.8rem;
  border: none;
  width: 100%;
  box-sizing: border-box;
  color: #1b1a1a;
  border: 1px solid var(--blue-default);
  font-size: 0.9rem;
}
input[type=text]::-webkit-inner-spin-button,
input[type=email]::-webkit-inner-spin-button,
input[type=number]::-webkit-inner-spin-button,
input[type=password]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=text]::-webkit-outer-spin-button,
input[type=email]::-webkit-outer-spin-button,
input[type=number]::-webkit-outer-spin-button,
input[type=password]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=number]:focus,
input[type=password]:focus {
  outline: 2px solid #0cb0da;
  box-shadow: 0px 0px 5px 1px rgba(123, 178, 213, 0.5411764706);
}

input[type=number] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

a {
  color: var(--blue-default) !important;
  font-weight: 500;
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

.icon {
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
  width: 1.8rem;
  height: 1.8rem;
}

.hide {
  display: none !important;
}

.container-icon-hyper.mobile {
  display: none;
}

.icon-coopolis.mobile {
  display: none;
}

.container-steps-login-mobile {
  display: none;
}

.circle-step {
  width: 14px;
  height: 14px;
  padding: 0.25rem;
  border-radius: 50%;
  background-color: #cfcdcd;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  font-size: 0.9rem;
  border: 2px solid #cfcdcd;
  font-weight: 600;
  position: relative;
  z-index: 1;
  display: block;
}

.container-icon-step.current .circle-step {
  background-image: var(--icon-current);
}
.container-icon-step.next .circle-step {
  background-image: var(--icon-next);
}
.container-icon-step.completed .circle-step {
  background-image: var(--icon-completed);
}

.container-text-step {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.wrapper-login {
  display: flex;
  flex-direction: row;
  height: 100vh;
  overflow: hidden;
}

/*******************************
********* SECTION LEFT *********
********************************/
.section-left {
  background-color: var(--blue-default);
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0.5rem;
}
.section-left .container-icon-hyper {
  margin: 1rem 0 0 1rem;
}
.section-left .container-icon-hyper img.icon-hyper {
  width: 7rem;
}
.section-left .container-company-and-steps {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: -moz-fit-content;
  width: fit-content;
  height: 100%;
  margin-top: 1rem;
  margin: 0 auto;
  /** steps login **/
}
.section-left .container-company-and-steps .container-title-company {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-left .container-company-and-steps .container-title-company .first-title {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 600;
  margin-top: 1rem;
}
.section-left .container-company-and-steps .container-title-company .second-title {
  color: #ff5050;
  font-size: 1.5rem;
  font-weight: 300;
}
.section-left .container-company-and-steps .container-steps-login {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}
.section-left .container-company-and-steps .container-icon-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.6rem;
}
.section-left .container-company-and-steps .container-icon-step .circle-step {
  color: #949494;
}
.section-left .container-company-and-steps .container-icon-step .container-text-step {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.section-left .container-company-and-steps .container-icon-step .container-text-step .title-step {
  font-size: 1.05rem;
  color: #ededed;
  opacity: 0.8;
}
.section-left .container-company-and-steps .container-icon-step .container-text-step .description-step {
  font-size: 0.9rem;
  color: #ededed;
  opacity: 0.8;
  font-weight: 300;
}
.section-left .container-company-and-steps .container-icon-step.current .circle-step {
  background-color: #fff;
  border: 2px solid #fff;
}
.section-left .container-company-and-steps .container-icon-step.current .title-step {
  font-weight: 500;
  color: #fff;
  opacity: 1;
}
.section-left .container-company-and-steps .container-icon-step.current .description-step {
  color: #fff;
  opacity: 1;
}
.section-left .container-company-and-steps .line-space-step {
  height: 6rem;
  width: 1px;
  background-color: #b0b0b0;
  position: absolute;
  margin-left: 0.75rem;
  z-index: 0;
  opacity: 0.8;
}
.section-left .container-company-and-steps .line-space-step.current {
  background-color: #fff;
  opacity: 1;
}
.section-left .container-company-and-steps .line-space-step.one {
  margin-top: 0;
}
.section-left .container-company-and-steps .line-space-step.two {
  margin-top: 7rem;
}
.section-left .container-company-and-steps .line-space-step.three {
  margin-top: 13rem;
}
.section-left .container-footer-palaces {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.section-left .container-footer-palaces .info-legali-coopolis {
  word-break: break-all;
  font-size: 0.75rem;
  position: relative;
  bottom: 1.3rem;
  z-index: 2;
  color: var(--blue-default) !important;
  width: 100%;
  box-sizing: border-box;
  height: 0px;
  text-align: center;
  padding: 0 1rem;
}
.section-left .container-footer-palaces .footer-img {
  width: 100%;
  height: 5rem;
  box-sizing: border-box;
  position: relative;
  box-sizing: content-box;
  background-size: contain;
  background-repeat: no-repeat;
}

/********************************
********* SECTION RIGHT *********
*********************************/
.section-right * {
  color: #2a2929;
}

.section-right {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

/****** FORM LOGIN ******/
.container-login {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 35rem;
  gap: 0.8rem;
  height: 100%;
}
.container-login .container-title-login {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-bottom: 1.5rem;
}
.container-login .container-title-login img.icon-coopolis {
  height: 2.7rem;
  width: auto;
}
.container-login .container-title-login .title {
  color: #434343;
  font-size: 2.7rem;
  font-weight: 600;
}
.container-login .form-login .frmlogin {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
}
.container-login .form-login .frmlogin .container-input {
  width: 100%;
  box-sizing: border-box;
}
.container-login .form-login .frmlogin .container-icon-input {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 0px;
  position: relative;
}
.container-login .form-login .frmlogin .container-icon-input .icon-user, .container-login .form-login .frmlogin .container-icon-input .icon-password {
  position: relative;
  padding: 0.8rem;
  top: -2.4rem;
}
.container-login .form-login .frmlogin .container-icon-input .icon-user {
  background-image: var(--icon-user);
}
.container-login .form-login .frmlogin .container-icon-input .icon-password {
  background-image: var(--icon-password);
}
.container-login .form-login .frmlogin button.btn-login {
  padding: 0.7rem;
  background-color: #057928;
  border: none;
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
}
.container-login .container-help-login {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  box-sizing: border-box;
}
.container-login .container-help-login .container-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
}
.container-login .container-help-login .container-check label {
  font-size: 0.8rem;
  cursor: pointer;
}
.container-login .container-help-login span {
  font-size: 0.8rem;
  cursor: pointer;
}
.container-login .container-help-login span:hover {
  cursor: pointer;
  text-decoration: underline;
}
.container-login .container-info-hyper {
  font-size: 0.85rem;
  text-align: center;
  margin-top: 1rem;
  color: #797979;
}

/********* AUTENTICAZIONE 2F *********
**************************************/
.container-title-2fa {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.container-title-2fa .title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
}
.container-title-2fa .description {
  font-size: 0.975rem;
  font-weight: 400;
  color: #777676;
  text-align: center;
}

.btn-avanti, .btn-send-pin, .btn-recupera, .btn-change-password {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--blue-default);
  color: #fff;
  padding: 0.6rem;
  border-radius: 0px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  width: 18rem;
  margin: 0 auto;
  border: 1px solid #0a293e;
}

.btn-change-password {
  width: 100%;
}

/****** SELECTED METHOD 2FA ******/
.section-method-2fa {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
  height: 100%;
}
.section-method-2fa .container-radios-method form {
  max-width: 40rem;
  display: flex;
  flex-direction: row;
  gap: 2rem;
  align-content: center;
  align-items: center;
}
.section-method-2fa .container-radios-method form input[type=radio] {
  display: none;
}
.section-method-2fa .container-radios-method form input[type=radio]:checked + .method {
  background-color: #f5f8fe;
  border: 1px solid var(--blue-default);
  font-weight: 600;
}
.section-method-2fa .container-radios-method form input[type=radio]:checked + .method span {
  color: var(--blue-default);
}
.section-method-2fa .container-radios-method form input[type=radio]:checked + .method .icon {
  filter: sepia(100%) hue-rotate(160deg) saturate(460%);
}
.section-method-2fa .container-radios-method form .method {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem;
  background-color: #f5f6f7;
  width: 20rem;
  cursor: pointer;
  border: 1px solid #d0d0d0;
}
.section-method-2fa .container-radios-method form .method * {
  cursor: pointer;
}
.section-method-2fa .container-radios-method form .method span {
  color: #302f2f;
}
.section-method-2fa .container-radios-method form .method.app .icon {
  background-image: var(--icon-app);
}
.section-method-2fa .container-radios-method form .method.sms .icon {
  background-image: var(--icon-sms);
}
.section-method-2fa .container-radios-method form .method.email .icon {
  background-image: var(--icon-email);
}

/****** PIN 2FA ******/
.section-pin-2fa {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  height: 100%;
  max-width: 25rem;
}
.section-pin-2fa .container-input-pin {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-pin-2fa .container-input-pin .btn-avanti {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.section-pin-2fa .container-input-pin .nessun-codice {
  font-size: 0.9rem;
  color: #777676;
}

/****** REQUEST PIN 2FA ******/
.section-request-pin-2fa {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  height: 100%;
  max-width: 25rem;
}
.section-request-pin-2fa .container-send-pin {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.section-request-pin-2fa .container-send-pin .btn-send-pin {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
}
.section-request-pin-2fa .container-send-pin .nessun-codice {
  font-size: 0.9rem;
  color: #777676;
}

.container-cookie {
  box-sizing: border-box;
  padding: 0 2rem 0.5rem 2rem;
  max-width: 60rem;
  font-size: 0.75rem;
  color: #797979 !important;
  position: absolute;
  bottom: 0;
  z-index: 2;
  /* width: 50%; */
  box-sizing: border-box;
  text-align: center;
  margin-bottom: 0.5rem;
}

/********* RECUPERO PASSWORD *********
**************************************/
.section-lost-password, .section-lost-password form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  height: 100%;
  max-width: 25rem;
}
.section-lost-password .container-icon-input, .section-lost-password form .container-icon-input {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 0px;
  position: relative;
}
.section-lost-password .container-icon-input .icon-user, .section-lost-password .container-icon-input .icon-email, .section-lost-password form .container-icon-input .icon-user, .section-lost-password form .container-icon-input .icon-email {
  position: relative;
  padding: 0.8rem;
  top: -2.4rem;
}
.section-lost-password .container-icon-input .icon-user, .section-lost-password form .container-icon-input .icon-user {
  background-image: var(--icon-user);
}
.section-lost-password .container-icon-input .icon-email, .section-lost-password form .container-icon-input .icon-email {
  background-image: var(--icon-email);
}
.section-lost-password .container-title-lost-password, .section-lost-password form .container-title-lost-password {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.section-lost-password .container-title-lost-password .title, .section-lost-password form .container-title-lost-password .title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
}
.section-lost-password .container-title-lost-password .description, .section-lost-password form .container-title-lost-password .description {
  font-size: 0.975rem;
  font-weight: 400;
  color: #777676;
  text-align: center;
}

/********* CAMBIA PASSWORD *********
**************************************/
.section-change-password, .section-change-password form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  height: 100%;
  max-width: 25rem;
}
.section-change-password .container-icon-input, .section-change-password form .container-icon-input {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 0px;
  position: relative;
}
.section-change-password .container-icon-input .icon-user, .section-change-password .container-icon-input .icon-email, .section-change-password .container-icon-input .icon-password, .section-change-password form .container-icon-input .icon-user, .section-change-password form .container-icon-input .icon-email, .section-change-password form .container-icon-input .icon-password {
  position: relative;
  padding: 0.8rem;
  top: -2.4rem;
}
.section-change-password .container-icon-input .icon-user, .section-change-password form .container-icon-input .icon-user {
  background-image: var(--icon-user);
}
.section-change-password .container-icon-input .icon-email, .section-change-password form .container-icon-input .icon-email {
  background-image: var(--icon-email);
}
.section-change-password .container-icon-input .icon-password, .section-change-password form .container-icon-input .icon-password {
  background-image: var(--icon-password);
}
.section-change-password .container-title-change-password, .section-change-password form .container-title-change-password {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}
.section-change-password .container-title-change-password .title, .section-change-password form .container-title-change-password .title {
  font-size: 1.6rem;
  font-weight: 600;
  color: #3d3d3d;
  text-align: center;
}
.section-change-password .container-title-change-password .description, .section-change-password form .container-title-change-password .description {
  font-size: 0.975rem;
  font-weight: 400;
  color: #777676;
  text-align: center;
}

.section-lost-password .container-info-hyper {
  display: none;
}

/************************************
********* MEDIA QUERY WIDTH *********
*************************************/
@media screen and (max-width: 1100px) {
  .wrapper-login {
    flex-direction: column;
  }
  .section-left {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
  }
  .section-left .container-company-and-steps {
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 100%;
    box-sizing: border-box;
    margin-top: -3rem;
    padding-bottom: 3rem;
  }
  .section-left .container-company-and-steps .line-space-step {
    height: 5rem;
  }
  .section-left .container-company-and-steps .line-space-step.two {
    margin-top: 6rem;
  }
  .section-left .container-company-and-steps .line-space-step.three {
    margin-top: 11rem;
  }
  .section-left .container-company-and-steps .container-steps-login {
    gap: 2.5rem;
  }
  .container-login {
    margin-top: -1.5rem;
  }
  .container-cookie {
    margin-bottom: 0.5rem;
    width: 100%;
  }
}
@media screen and (max-width: 700px) {
  .container-icon-hyper {
    display: none;
  }
  .info-legali-coopolis {
    display: none;
  }
  .container-steps-login {
    display: none;
  }
  .section-left .container-company-and-steps {
    padding: 1rem 0 2rem 0;
    flex-direction: column;
    margin-top: 0;
  }
  .section-left .container-company-and-steps .container-title-company {
    align-items: center;
    gap: 0.2rem;
  }
  .section-left .container-company-and-steps .container-steps-login {
    display: none;
  }
  .section-left .container-footer-palaces .footer-img {
    width: auto;
    height: 3rem;
  }
  .container-steps-login-mobile {
    display: flex;
    flex-direction: row;
    width: 100%;
    box-sizing: border-box;
    gap: 2rem;
    overflow: auto;
    scroll-behavior: smooth;
    height: 5rem;
    margin: 1.5rem 0;
  }
  .container-steps-login-mobile::-webkit-scrollbar {
    display: none;
  }
  .container-steps-login-mobile .container-icon-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 7.5rem;
  }
  .container-steps-login-mobile .container-icon-step .circle-step {
    color: #2f2f2f;
  }
  .container-steps-login-mobile .container-icon-step .title-step {
    font-size: 1.05rem;
    color: #6e6e6e;
    opacity: 0.8;
    font-weight: 500;
    text-align: center;
  }
  .container-steps-login-mobile .container-icon-step.current .circle-step {
    border: 2px solid var(--blue-default);
    background-color: #fff;
  }
  .container-steps-login-mobile .container-icon-step.current .title-step {
    font-weight: 500;
    color: var(--blue-default);
    opacity: 1;
  }
  .container-steps-login-mobile .container-icon-step.completed .circle-step {
    background-image: var(--icon-completed-mobile);
    background-color: #059667;
    border: 2px solid #059667;
  }
  .container-steps-login-mobile .container-icon-step.completed .title-step {
    font-weight: 500;
    color: #067955;
    opacity: 1;
  }
  .container-steps-login-mobile .line-space-step {
    height: 1px;
    width: 100%;
    box-sizing: content-box;
    background-color: #b0b0b0;
    position: absolute;
    z-index: 0;
    opacity: 0.8;
    margin-top: 0.8rem;
    margin-left: 0;
  }
  /** LOGIN **/
  .container-login {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1rem;
    margin: 0;
    justify-content: flex-start;
  }
  .container-login .container-title-login {
    padding-bottom: 0.5rem;
  }
  .container-login .container-title-login .icon-coopolis {
    display: none;
  }
  .container-login .container-icon-hyper.mobile {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    margin: 0 auto;
    padding-top: 1rem;
    margin-bottom: 4rem;
  }
  .container-login .container-icon-hyper.mobile img.icon-hyper {
    height: 2.3rem;
    width: auto;
  }
  .container-login .container-icon-hyper.mobile img.icon-coopolis {
    height: 2.6rem;
    width: auto;
  }
  /** METHOD 2FA **/
  .section-method-2fa {
    gap: 2rem;
    padding: 1rem 2rem 0 2rem;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }
  .section-method-2fa .container-radios-method {
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
  }
  .section-method-2fa .container-radios-method .method {
    width: 100%;
    box-sizing: border-box;
  }
  .section-method-2fa .btn-avanti {
    width: 100%;
    box-sizing: border-box;
  }
  /** PIN 2FA **/
  .section-pin-2fa {
    margin-bottom: 4rem;
    gap: 1rem;
    max-width: 100%;
    padding: 0 0.5rem;
  }
  .container-cookie {
    padding: 0 0.5rem;
  }
  .sec-violation .container-text-sec-violation {
    padding: 0 1rem;
    text-align: center;
  }
}
@media screen and (max-width: 375px) {
  .wrapper-login {
    height: 100%;
  }
  .container-login {
    margin-bottom: 2rem;
  }
}
/***********************************
******** MEDIA QUERY HEIGHT ********
************************************/
@media screen and (max-height: 900px) {
  .wrapper-login {
    height: 100%;
  }
  .section-right {
    padding-top: 1rem;
  }
  .container-login {
    margin: 0;
  }
  .section-method-2fa {
    padding-bottom: 7rem;
  }
  .container-cookie {
    position: relative;
  }
}/*# sourceMappingURL=style_login.css.map */