/*! _auth.scss | Vuero | Css ninja 2020-2021 */
/*
    1. Login / Signup v2
    3. Login / Signup v2 Dark mode
    4. Login / Signup v3
    5. Login / Signup v3 Dark mode
    6. Media Queries
*/
/* ==========================================================================
1. Login / Signup v2
========================================================================== */
.auth-wrapper-inner {
  overflow: hidden !important;
  height: 100%;
  padding: 0;
  margin: 0;
}
.auth-wrapper-inner.is-gapless:not(:last-child) {
  margin-bottom: 0 !important;
}
.auth-wrapper-inner.is-single {
  background: var(--widget-grey);
  min-height: 100vh;
}
.auth-wrapper-inner .hero-banner {
  background: var(--widget-grey);
}
.auth-wrapper-inner .hero-heading {
  position: relative;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 0 0 0;
}
.auth-wrapper-inner .hero-heading .dark-mode {
  position: absolute;
  top: 24px;
  right: 24px;
  transform: scale(0.6);
  z-index: 2;
}
.auth-wrapper-inner .hero-heading .auth-logo {
  display: flex;
  justify-content: center;
}
.auth-wrapper-inner .hero-heading .auth-logo svg {
  height: 42px;
  width: 42px;
}
.auth-wrapper-inner .hero-heading .auth-logo .top-logo {
  height: 42px;
}
.auth-wrapper-inner .hero.is-white {
  background: var(--white);
}
.auth-wrapper-inner .hero .hero-body .login {
  padding: 10px 0;
}
.auth-wrapper-inner .hero .hero-body .auth-content {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  margin-top: -40px;
  margin-bottom: 40px;
}
.auth-wrapper-inner .hero .hero-body .auth-content h2 {
  font-size: 2rem;
  font-family: var(--font);
  line-height: 1;
}
.auth-wrapper-inner .hero .hero-body .auth-content p {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--muted-grey);
}
.auth-wrapper-inner .hero .hero-body .auth-content a {
  font-size: 0.9rem;
  font-family: var(--font-alt);
  font-weight: 500;
  color: var(--primary);
}
.auth-wrapper-inner .hero .hero-body .auth-form-wrapper {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
}
.auth-wrapper-inner .forgot-link {
  margin-top: 10px;
}
.auth-wrapper-inner .forgot-link a {
  font-family: var(--font-alt);
  font-size: 0.9rem;
  color: var(--light-text);
  transition: color 0.3s;
}
.auth-wrapper-inner .forgot-link a:hover {
  color: var(--primary);
}
.auth-wrapper-inner .setting-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
}
.auth-wrapper-inner .setting-item .setting-meta {
  font-family: var(--font);
  color: var(--light-text);
  margin-left: 8px;
}
.auth-wrapper-inner .v-button {
  min-height: 44px;
}
/* ==========================================================================
2. Login / Signup v2 Dark mode
========================================================================== */
.is-dark .auth-wrapper-inner .hero-banner {
  background: var(--dark-sidebar-light-4);
}
.is-dark .auth-wrapper-inner .hero.is-white {
  background: var(--dark-sidebar-dark-4);
}
.is-dark .auth-wrapper-inner .hero .hero-body .auth-content h2 {
  color: var(--dark-dark-text);
}
.is-dark .auth-wrapper-inner .hero .hero-body .auth-content a {
  color: var(--primary);
}
.is-dark .auth-wrapper-inner .forgot-link a:hover {
  color: var(--primary);
}
/* ==========================================================================
3. Login / Signup v3
========================================================================== */
.auth-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 80px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.auth-nav .left,
.auth-nav .right {
  display: flex;
  align-items: center;
  width: 20%;
}
.auth-nav .right {
  justify-content: flex-end;
}
.auth-nav .right .dark-mode {
  transform: scale(0.7);
}
.auth-nav .center {
  flex-grow: 2;
}
.auth-nav .center a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.auth-nav .center a img {
  display: block;
  width: 100%;
  max-width: 50px;
}
.auth-wrapper-inner .single-form-wrap {
  min-height: auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap {
  width: 100%;
  max-width: 400px;
  margin: 40px auto 0 auto;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .auth-head {
  max-width: 320px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20px;
  text-align: center;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .auth-head h2 {
  font-size: 2rem;
  font-family: var(--font);
  line-height: 1;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .auth-head p {
  font-size: 1rem;
  margin-bottom: 8px;
  color: var(--muted-grey);
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .auth-head a {
  font-size: 0.9rem;
  font-family: var(--font-alt);
  font-weight: 500;
  color: var(--primary);
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .form-card {
  background: var(--white);
  border: 1px solid var(--fade-grey-dark-3);
  border-radius: 10px;
  padding: 50px;
  margin-bottom: 16px;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .form-card .v-button {
  margin-top: 10px;
}
/* ==========================================================================
4. Login / Signup v3 Dark mode
========================================================================== */
.is-dark .auth-wrapper-inner.is-single {
  background: var(--dark-sidebar-light-4);
}
.is-dark .auth-wrapper-inner.is-single .single-form-wrap .inner-wrap .auth-head h2 {
  color: var(--dark-dark-text);
}
.is-dark .auth-wrapper-inner.is-single .single-form-wrap .inner-wrap .auth-head a {
  color: var(--primary);
}
.is-dark .auth-wrapper-inner.is-single .single-form-wrap .inner-wrap .form-card {
  background: var(--dark-sidebar-dark-4);
  border-color: var(--dark-sidebar-light-1);
}
/* ==========================================================================
5. Media Queries
========================================================================== */
@media only screen and (max-width: 767px) {
.avatar-carousel.resized-mobile {
    max-width: 300px;
}
.avatar-carousel .slick-custom {
    display: none !important;
}
.avatar-carousel .image-wrapper img {
    height: auto;
}
.auth-wrapper-inner .hero .hero-body .auth-content {
    text-align: center !important;
}
.auth-wrapper-inner .single-form-wrap .inner-wrap .form-card {
    padding: 40px;
}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
.modern-login .top-logo svg {
    height: 60px;
    width: 60px;
}
.modern-login .dark-mode {
    top: -58px;
    right: 30%;
}
.modern-login .columns {
    display: flex;
    height: 100vh;
}
.auth-wrapper-inner .hero .hero-body .auth-content {
    text-align: center !important;
}
.signup-columns {
    max-width: 460px;
    margin: 0 auto;
}
}