/* == LOGIN == */
.offcanvas-login {
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-color: #212529;
  --bs-offcanvas-light-color: #6c757d;
  --bs-offcanvas-header-height: 3rem;
  --bs-offcanvas-bg: #fff;
  --bs-border-color: #dddddd;
  font-size: 1rem;
  position: fixed;
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  transform: translateX(100%);
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: transform 0.3s ease-in-out;
}
.offcanvas-login.show {
  transform: none;
}
.offcanvas-login-shadow {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background-color: #000;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}
.offcanvas-login-shadow.show {
  opacity: 0.5;
  visibility: visible;
}
.offcanvas-login-header {
  display: flex;
  align-items: center;
  justify-content: end;
  height: var(--bs-offcanvas-header-height);
}
.btn-close-login-offcanvas {
  opacity: 0.5;
  width: var(--bs-offcanvas-header-height);
  height: var(--bs-offcanvas-header-height);
  border-width: 0;
  background-color: transparent;
  transition: opacity 0.3s ease-in-out;
  background-size: 1rem;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.035' height='13' viewBox='0 0 13.035 13'%3E%3Cpath id='close' d='M6.523,601.1l-5.128,5.093L0,604.8l5.105-5.105L0,594.588l1.395-1.395,5.118,5.093,5.128-5.093,1.395,1.395L7.93,599.693l5.105,5.105-1.395,1.395Z' transform='translate(0 -593.193)'/%3E%3C/svg%3E%0A");
}
.btn-close-login-offcanvas:hover {
  opacity: 1;
}
.offcanvas-login-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: auto;
  padding: 0 1rem var(--bs-offcanvas-header-height);
}
.offcanvas-login-title {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}
.offcanvas-login .form-control {
  border-color: var(--bs-border-color);
}
.input-password-wrapper .btn-show-password {
  opacity: 0.5;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 0;
  width: 2.5rem;
  border-width: 0;
  background-color: transparent;
  transition: opacity 0.3s ease-in-out;
  background-size: 1.15rem;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.43' height='12' viewBox='0 0 15.43 12'%3E%3Cpath id='eye' d='M7.739,32A7.537,7.537,0,0,0,2.58,34.159,10.613,10.613,0,0,0,.091,37.671a.852.852,0,0,0,0,.659A10.613,10.613,0,0,0,2.58,41.841,7.537,7.537,0,0,0,7.739,44,7.537,7.537,0,0,0,12.9,41.841a10.694,10.694,0,0,0,2.491-3.512.852.852,0,0,0,0-.659A10.667,10.667,0,0,0,12.9,34.159,7.537,7.537,0,0,0,7.739,32ZM3.881,38a3.857,3.857,0,1,1,3.857,3.857A3.857,3.857,0,0,1,3.881,38Zm3.857-1.714A1.716,1.716,0,0,1,6.024,38a1.739,1.739,0,0,1-.544-.088.228.228,0,0,0-.313.2,2.485,2.485,0,0,0,.086.554,2.572,2.572,0,1,0,2.6-3.236.227.227,0,0,0-.2.313,1.739,1.739,0,0,1,.088.544Z' transform='translate(-0.025 -32)' fill='%23212529'/%3E%3C/svg%3E%0A");
}
.input-password-wrapper .btn-show-password.active {
  background-size: 1.28rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.5' height='14' viewBox='0 0 17.5 14'%3E%3Cpath id='eye-hide' d='M1.055.134A.656.656,0,1,0,.246,1.168L16.433,13.855a.656.656,0,0,0,.809-1.034l-2.877-2.253a10.894,10.894,0,0,0,2.185-3.237.87.87,0,0,0,0-.673,10.889,10.889,0,0,0-2.543-3.585A7.682,7.682,0,0,0,8.744.87,7.468,7.468,0,0,0,4.115,2.532ZM6.095,4.082a3.938,3.938,0,0,1,6.111,4.791l-1.055-.826A2.625,2.625,0,0,0,8.859,4.372a.232.232,0,0,0-.2.32,1.775,1.775,0,0,1,.09.555,1.742,1.742,0,0,1-.18.774L6.1,4.085Zm4.1,6.573A3.938,3.938,0,0,1,4.807,6.994a4.072,4.072,0,0,1,.038-.552L2.267,4.41A10.344,10.344,0,0,0,.938,6.658a.87.87,0,0,0,0,.673,10.889,10.889,0,0,0,2.543,3.585,7.682,7.682,0,0,0,5.264,2.2,7.188,7.188,0,0,0,3.451-.889Z' transform='translate(0.006 0.006)' fill='%23212529'/%3E%3C/svg%3E%0A");
}
.input-password-wrapper .btn-show-password:hover {
  opacity: 1;
}
.login-forgot-password {
  opacity: 0.5;
  font-size: 0.85rem;
  color: var(--bs-offcanvas-color);
  transition: opacity 0.3s ease-in-out;
}
.login-forgot-password:hover {
  color: var(--bs-offcanvas-color);
  opacity: 1;
}
.social-media-signin-hr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--bs-offcanvas-light-color);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.social-media-signin-hr::before,
.social-media-signin-hr::after {
  content: "";
  display: block;
  border-top: 1px solid var(--bs-border-color);
  flex: 1 1 auto;
}
.social-media-signin-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.btn-social-media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--bs-offcanvas-light-color);
  border: 1px solid var(--bs-border-color);
  height: 2.75rem;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.btn-social-media:hover {
  border-color: var(--bs-offcanvas-color);
}
.btn-social-media img {
  flex-shrink: 0;
}
.offcanvas-login .new-account-link {
  display: block;
  font-size: 0.85rem;
  text-align: center;
  text-decoration: none;
  color: var(--bs-offcanvas-color);
  border-top: 1px solid var(--bs-border-color);
  margin-top: 1rem;
  padding-top: 1rem;
}
.offcanvas-login .new-account-link a {
  color: var(--bs-offcanvas-color);
  font-weight: 700;
}

/* == REGISTO == */
.new-register-page-wrapper {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.new-register-page-wrapper h1 {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
}

/* - older bootstrap - */
.offcanvas-login .text-end .mb-2,
.new-register-page-wrapper .text-end .mb-2 {
  margin-bottom: 0.5rem;
}
.offcanvas-login .text-end .mb-3,
.new-register-page-wrapper .text-end .mb-3 {
  margin-bottom: 1rem;
}
.offcanvas-login .text-end .mb-5,
.new-register-page-wrapper .text-end .mb-5 {
  margin-bottom: 3rem;
}
.offcanvas-login .text-end,
.new-register-page-wrapper .text-end {
  text-align: right;
}
.offcanvas-login .form-floating,
.new-register-page-wrapper .form-floating {
  position: relative;
}
.offcanvas-login .opacity-50,
.new-register-page-wrapper .opacity-50 {
  opacity: 0.5;
}