body {
    --lop-cta-color: #e42527;
    --lop-section-bg: #f5f5f5;
    --lop-access-btn-clr: #058007;
    background-color: #f2f2f2;
    background-image: url("/sites/zweb/images/zoho_general_pages/login-page-bg.png");
    background-position: center center;
    background-attachment: inherit;
    background-size: cover;
}

.quick-connect-links-wrap, .zw-promo-top div:not(.zDCnotif-container), .zsiq_floatmain.zsiq_theme1.siq_bR,#zsiq_float{display: none !important;}

.zw-product-header,
.z-mobile-menu-v2,
.zcr-quick-connect, .zcr-quick-connect .zcr-qc-arrow,
.zws-header,
.loggedin-userinfo,
.body-umain :is(.zws-login-info, .zws-login-signup-cta) {
    display: none;
}


.zws-login-signup-cta a,
.zws-login-info h1,
.zws-login-cta,
.loggedin-userinfo :is(.username, .access-apps) {
    font-family: var(--primaryfont-semibold);
}

.zws-login-cta,
.loggedin-userinfo .access-apps {
    border-radius: 4px;
    background: var(--primary-focus-color);
    color: #fff;
    font-size: 18px;
    padding: 16px 40px;
    appearance: none;
    cursor: pointer;
    text-transform: uppercase;
    display: inline-block;
    height: fit-content;
    width: fit-content;
    transition: 0.15s ease-in-out scale;
}

:is(.zws-login-cta, .loggedin-userinfo .access-apps):hover {
    scale: 1.02
}
.zws-brand-logo, .zws-brand-logo img {
  width: auto;
  height: 48px;
  display: inline-block;
}

/* LOGGED IN USER INFO */

.loggedin-userinfo .username,
.zws-login-info h1 {
    font-size: clamp(26px, 4vw, 36px);
    display: block;
    padding-block-end: 20px;
    margin-block-end: 0;
    line-height:1.2;
}

.loggedin-userinfo .access-apps {
    background: var(--lop-access-btn-clr);
    text-transform: capitalize;
}

/* LOGGED IN USER INFO ENDS */

/* NEW LOG IN USER SECTION */
.zws-login-section {
    min-height: calc(100dvh - 42px);
    text-align: center;
    align-content: center;
    display: grid;
    place-items: center;
}

.zws-login-section-inner{
    margin: 64px 0 48px;
    width: min(90%, 800px);
    margin-inline: auto;
    border-radius: 8px;
    position: relative;
    min-height: 375px;
}
.zws-logo-wrap {
    margin-block-end: 24px;
    padding-inline: 12px;
}
.zws-login-wrap {
    position: absolute;
    display: none;
    transition: .6s ease;
    backface-visibility:hidden;
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 64px 0 48px;
    text-align: center;
}

.loggedin-userinfo, .body-umain :is(.zws-login-info,.zws-login-signup-cta) {
    display: block;
}

.zws-login-wrap.flip-front {
    z-index: 2;
    transform: rotateY(0deg);
    display:block;
}
.body-umain .zws-login-wrap.flip-front {
    z-index: 1;
    transform: rotateY(180deg);
    animation: mymove 2s forwards;
}

.zws-login-wrap.flip-back {
    z-index: 1;
    transform: rotateY(-180deg);
    display:block;
}
body:not(.body-umain) .zws-login-wrap.flip-back{
 animation: mymove 1s forwards;
}

.body-umain .zws-login-wrap.flip-back {
    z-index: 2;
    transform: rotateY(0deg);
}

@keyframes mymove {
   50% {visibility: hidden}
    100% {visibility: hidden}
}
.zws-login-info,
.loggedin-userinfo {
    padding-block-end: 64px;
    padding-inline: 32px;
}

.zws-login-info .zws-pro-name {
    display: inline-block;
    text-transform: capitalize;
}

.zws-login-signup-cta {
    padding: 12px;
    border-top: 1px dashed #e2e2e2;
    margin-block-end: 0;
    border-radius: 0 0 8px 8px;
    position: absolute;
    width: 100%;
    font-size: 14px;
    background: #fff;
}


.body-umain .zws-login-signup-cta {
  opacity: 0;
  visibility: hidden;   
}

.zws-login-signup-cta a {
    color: var(--primary-btn-color);
    display: inline-block;
    text-decoration: underline;
}

/* NEW LOG IN USER SECTION ENDS */

/* FOOTER CSS */
.r-g-f .zwf-new-footer .zwf-only-copyright,
.zwf-new-footer {
    border: none;
    background: none;
}

@media only screen and (max-width: 767px) {
    .zws-login-wrap {
  padding: 40px 0 40px;
    }
    .zws-login-info, .loggedin-userinfo {
  padding-block-end: 48px;
  padding-inline: 24px;
    }
    .zws-login-section {
       align-content: start;
  display: inherit;
  padding: 24px 32px;
    }
    .zws-login-section-inner {
  margin: 12px 0 48px;
  width: min(100%,800px);
  min-height: 330px;
    } 
}

@media only screen and (max-width: 480px) {
    .zws-login-section-inner {
    min-height: 350px;
  }
  .zws-login-cta, .loggedin-userinfo .access-apps {
  font-size: 16px;
  padding: 12px 24px;
  }
  .loggedin-userinfo .username,
.zws-login-info h1 {
    font-size: clamp(18px,6vw,28px)
}
}