body.new-login-layout > div.main-conainer { display: flex; flex-direction: row; width: 100%; min-height: 100vh; background-image: url('https://visitproeasy.azureedge.net/Assets/theme/img/bg_login_vpct_blue_dark.jpg'); background-size: auto 100%; background-repeat: no-repeat; background-position: right center; }

body.new-login-layout > div.top-links { display: flex; flex-direction: row; flex-wrap: nowrap; position: absolute; right: 240px; top: 36px; min-width: 180px; height: 36px; justify-content: flex-end; }

body.new-login-layout > div.top-links > a,
body.new-login-layout > div.top-links > a:hover,
body.new-login-layout > div.top-links > a:active,
body.new-login-layout > div.top-links > a:visited { text-decoration: none; color: #fff; font-size: 16px; line-height: 36px; font-weight: 400; }

body.new-login-layout > div.main-conainer > div.bg-col { flex-grow: 1; display: flex; flex-direction: column; min-height: 100vh; }

body.new-login-layout > div.main-conainer > div.form-col { width: 520px; flex-grow: 0; background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(25px); display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 120px 60px 30px 60px; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner { width: 390px; display: flex; flex-direction: column; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.logo-cotainer { width: 84px; height: 84px; margin-bottom: 64px; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.logo-cotainer > img { width: 100%; height: auto; object-fit: cover; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container { display: flex; flex-direction: column; width: 100%; min-height: 180px; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links { display: flex; flex-direction: row; min-height: 50px; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link { padding: 16px; min-width: 75px; line-height: 18px; font-size: 16px; letter-spacing: 0.05rem; cursor: pointer; color: #1E1E1E80; font-weight: 400; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link > a,
body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link > a:hover,
body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link > a:active,
body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link > a:visited { text-decoration: none; color: #1E1E1E80; font-weight: 400; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.links > div.link.active { background: rgba(255, 255, 255, 0.75); border-radius: 5px 5px 0px 0px; color: #1D85B2; font-weight: 500; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.form-box { min-height: 180px; display: flex; width: 100%; background: rgba(255, 255, 255, 0.75); border-radius: 0px 5px 5px 5px; }

body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.form-box > form { display: flex; flex-direction: column; margin: 30px 15px 15px 15px; gap: 15px; width: 100%; }

div.form-box > form > div > button.btn { background-color: #24A6DF !important; color: #fff !important; width: 100%; font-weight: 400; font-size: 16px; letter-spacing: 2px; }

div.form-box > form > div.forgot-pwd { display: flex; flex-direction: column; height: 24px; width: 100%; align-items: flex-end; }

div.form-box > form > div.forgot-pwd > a,
div.form-box > form > div.forgot-pwd > a:hover,
div.form-box > form > div.forgot-pwd > a:active,
div.form-box > form > div.forgot-pwd > a:visited { font-size: 14px; font-weight: 400; color: #24A6DF; }

div.form-box > form > div.heading { padding: 0 18px; margin-bottom: 12px; }

div.form-box > form > div.heading > h3 { margin: 0; font-size: 24px; font-weight: 800; color: #1E1E1E; }

@media only screen and (max-width: 1440px) {
    body.new-login-layout > div.top-links { right: 148px; }
}

@media only screen and (max-width: 1040px) {
    body.new-login-layout > div.top-links { right: 96px; }
}

@media only screen and (max-width: 640px) {
    body.new-login-layout > div.main-conainer > div.bg-col { display: none; }
    body.new-login-layout > div.main-conainer > div.form-col { width: 100%; }
    body.new-login-layout > div.top-links { left: 0; right: 0; top: 16px; width: 100%; justify-content: center; background: rgba(0,0,0,0.25); }
}

@media only screen and (max-width: 480px) {
    body.new-login-layout > div.main-conainer > div.form-col { padding: 80px 24px 12px 24px; }
    body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.logo-cotainer { margin-bottom: 48px; }
    body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner { width: 100%; padding: 0 20px; }
    body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.form-box > form > div { margin-right: 15px; }
    body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.form-box > form > div.forgot-pwd { width: unset; }
    body.new-login-layout > div.main-conainer > div.form-col > div.form-col-inner > div.content-container > div.form-box > form > div.forgot-pwd.login-link { margin-top: 8px; margin-bottom: 8px; align-items: center; width: 100%; margin-right: 0; min-height: 24px; height: unset; }
}