@font-face {
    font-family: HrmLogin;
    src: url('../fonts/IRANSansWeb.woff2') format('woff2');
    font-display: swap;
}
html, body { margin: 0; min-height: 100%; background: #031a2c; }
#layout, #site_page_content { width: 100%; max-width: none; margin: 0; padding: 0; }
.modern-login-page, .modern-login-page * { box-sizing: border-box; }
.modern-login-page {
    position: relative;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(112 * var(--login-unit, 1px)) 10.6% calc(94 * var(--login-unit, 1px));
    display: flex;
    align-items: center;
    color: #edf5fa;
    font-family: HrmLogin, Tahoma, sans-serif;
    background: linear-gradient(0deg, rgba(0,12,28,.24), transparent 45%), url('../images/hrm_login_back.jpg') center / cover no-repeat;
}
.modern-login-page::after { content: ''; position: absolute; bottom: 7%; right: 0; left: 0; height: calc(1 * var(--login-unit, 1px)); background: linear-gradient(90deg, transparent, #10b8c6, transparent); pointer-events: none; }
.login-brand { position: absolute; top: 6%; left: 8%; }
.login-brand img { width: calc(185 * var(--login-unit, 1px)); height: auto; }
.login-motto { position: absolute; top: 5%; right: 8.5%; text-align: center; color: #c0d3e0; }
.login-motto p { margin: 0 0 calc(7 * var(--login-unit, 1px)); font-size: calc(14 * var(--login-unit, 1px)); letter-spacing: calc(1 * var(--login-unit, 1px)); }
.login-motto span { font-family: Arial, sans-serif; font-size: calc(10 * var(--login-unit, 1px)); }
.login-promise { position: absolute; top: 19%; left: 20%; margin: 0; padding-right: calc(15 * var(--login-unit, 1px)); border-right: calc(4 * var(--login-unit, 1px)) solid #ff1756; font-size: clamp(calc(21 * var(--login-unit, 1px)), 2.25vw, calc(34 * var(--login-unit, 1px))); font-weight: bold; text-shadow: 0 calc(2 * var(--login-unit, 1px)) calc(8 * var(--login-unit, 1px)) #031a2c; }
.login-signature { position: absolute; bottom: 13%; left: 5%; font-size: calc(23 * var(--login-unit, 1px)); transform: rotate(-10deg); }
.login-signature::after { content: ''; display: block; width: calc(125 * var(--login-unit, 1px)); height: calc(13 * var(--login-unit, 1px)); border-top: calc(3 * var(--login-unit, 1px)) solid #ff1756; border-radius: 50%; margin-top: calc(8 * var(--login-unit, 1px)); }
.modern-login-shell { position: relative; width: calc(406 * var(--login-unit, 1px)); min-height: calc(514 * var(--login-unit, 1px)); margin-left: auto; border: calc(1 * var(--login-unit, 1px)) solid #82efff; border-radius: calc(20 * var(--login-unit, 1px)); background: rgba(0,30,51,.67); box-shadow: 0 0 calc(7 * var(--login-unit, 1px)) #4cdeff, 0 0 calc(27 * var(--login-unit, 1px)) #04c6ff80, inset 0 0 calc(22 * var(--login-unit, 1px)) #00b9ef70; backdrop-filter: blur(calc(7 * var(--login-unit, 1px))); -webkit-backdrop-filter: blur(calc(7 * var(--login-unit, 1px))); }
.modern-login-form-side { padding: calc(28 * var(--login-unit, 1px)) calc(55 * var(--login-unit, 1px)) calc(70 * var(--login-unit, 1px)); }
.modern-login-form { margin: 0; width: 100%; }
.modern-login-logo { display: block; width: calc(174 * var(--login-unit, 1px)); height: auto; margin: 0 auto calc(15 * var(--login-unit, 1px)); }
.modern-login-heading { color: #edf5fa; margin: 0 calc(-30 * var(--login-unit, 1px)) calc(52 * var(--login-unit, 1px)); text-align: center; font-size: calc(23 * var(--login-unit, 1px)); font-weight: normal; line-height: 1.7; }
.modern-login-field { margin-bottom: calc(12 * var(--login-unit, 1px)); }
.modern-login-label { position: absolute; width: calc(1 * var(--login-unit, 1px)); height: calc(1 * var(--login-unit, 1px)); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.modern-login-input-wrap { position: relative; }
/* Keep saved credentials legible without the browser's pale autofill fill. */
.modern-login-page input.modern-login-input:-webkit-autofill,
.modern-login-page input.modern-login-input:-webkit-autofill:hover,
.modern-login-page input.modern-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    caret-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #25465b inset;
    box-shadow: 0 0 0 1000px #25465b inset;
}
.modern-login-page input.modern-login-input { width: 100%; height: calc(42 * var(--login-unit, 1px)); padding: 0 calc(45 * var(--login-unit, 1px)) 0 calc(49 * var(--login-unit, 1px)); border: calc(1 * var(--login-unit, 1px)) solid #8fa6b5; border-radius: calc(11 * var(--login-unit, 1px)); background: rgba(174,202,219,.15); color: #fff; font: calc(12 * var(--login-unit, 1px)) HrmLogin, Tahoma, sans-serif; direction: ltr; text-align: left; box-shadow: inset 0 0 calc(3 * var(--login-unit, 1px)) #c6e2ed30; }
.modern-login-page input.modern-login-input::placeholder { color: #b8c9d4; opacity: 1; }
.modern-login-page input.modern-login-input:focus { outline: calc(2 * var(--login-unit, 1px)) solid #45dfff; outline-offset: calc(2 * var(--login-unit, 1px)); }
.modern-login-field-icon { position: absolute; left: calc(13 * var(--login-unit, 1px)); top: calc(11 * var(--login-unit, 1px)); width: calc(19 * var(--login-unit, 1px)); height: calc(20 * var(--login-unit, 1px)); color: #d0e0e8; pointer-events: none; z-index: 1; }
.modern-login-password-toggle { position: absolute; right: calc(3 * var(--login-unit, 1px)); top: calc(2 * var(--login-unit, 1px)); width: calc(38 * var(--login-unit, 1px)); height: calc(38 * var(--login-unit, 1px)); display: grid; place-items: center; padding: 0; border: 0; border-radius: calc(8 * var(--login-unit, 1px)); background: transparent; color: #d0e0e8; cursor: pointer; }
.modern-login-eye { position: relative; display: block; width: calc(18 * var(--login-unit, 1px)); height: calc(12 * var(--login-unit, 1px)); border: calc(1.5 * var(--login-unit, 1px)) solid currentColor; border-radius: 70% 30% / 70% 30%; transform: rotate(45deg); }
.modern-login-eye::before { content: ''; position: absolute; width: calc(5 * var(--login-unit, 1px)); height: calc(5 * var(--login-unit, 1px)); border: calc(1 * var(--login-unit, 1px)) solid currentColor; border-radius: 50%; top: calc(2 * var(--login-unit, 1px)); left: calc(5 * var(--login-unit, 1px)); }
.is-visible .modern-login-eye::after { content: ''; position: absolute; width: calc(22 * var(--login-unit, 1px)); height: calc(2 * var(--login-unit, 1px)); background: currentColor; top: calc(4 * var(--login-unit, 1px)); left: calc(-3 * var(--login-unit, 1px)); }
.modern-login-submit { position: relative; width: 100%; height: calc(44 * var(--login-unit, 1px)); margin-top: calc(25 * var(--login-unit, 1px)); border: 0; border-radius: calc(24 * var(--login-unit, 1px)); color: #fff; background: linear-gradient(100deg, #ff124d, #ec3651 48%, #9b8987); box-shadow: 0 0 calc(18 * var(--login-unit, 1px)) #fa20552b; font: calc(15 * var(--login-unit, 1px)) HrmLogin, Tahoma, sans-serif; cursor: pointer; }
.modern-login-submit:hover { filter: brightness(1.12); }
.login-submit-arrow { position: absolute; right: calc(13 * var(--login-unit, 1px)); top: calc(8 * var(--login-unit, 1px)); width: calc(28 * var(--login-unit, 1px)); height: calc(28 * var(--login-unit, 1px)); border-radius: 50%; background: #263b4870; box-shadow: 0 0 calc(9 * var(--login-unit, 1px)) #fff4; font: calc(24 * var(--login-unit, 1px))/calc(26 * var(--login-unit, 1px)) Arial, sans-serif; }
.modern-login-page button:focus-visible { outline: calc(2 * var(--login-unit, 1px)) solid #45dfff; outline-offset: calc(4 * var(--login-unit, 1px)); }
.modern-login-error { margin: calc(-25 * var(--login-unit, 1px)) 0 calc(20 * var(--login-unit, 1px)); padding: calc(10 * var(--login-unit, 1px)); border: calc(1 * var(--login-unit, 1px)) solid #f692a7; border-radius: calc(8 * var(--login-unit, 1px)); background: #541f35; color: #fff; font-size: calc(12 * var(--login-unit, 1px)); line-height: 1.8; }
/* Reference: 406 × 514 card at (738, 112) in a 1280 × 720 viewport. */
@media (min-width: 1001px) {
    .modern-login-page {
        --login-unit: 0.078125vw;
        padding: 15.555556vh 10.625vw 13.055556vh;
        padding-block: 15.555556dvh 13.055556dvh;
        align-items: flex-start;
    }
    .modern-login-shell {
        width: 31.71875vw;
        flex-shrink: 0;
        min-height: 71.388889vh;
        min-height: 71.388889dvh;
    }
    .modern-login-form-side { padding: 3.888889vh 4.296875vw 9.722222vh; }
}
@media (max-width: 1000px) { .modern-login-page { padding-right: 6%; padding-left: 6%; } .login-promise { left: 7%; font-size: 22px; max-width: 32%; } }
@media (max-width: 700px) {
    .modern-login-page { padding: 150px 22px 65px; justify-content: center; background-position: 58% center; }
    .login-brand { top: 25px; left: 24px; }
    .login-brand img { width: 125px; }
    .login-motto { top: 30px; right: 22px; }
    .login-motto p { font-size: 10px; letter-spacing: 0; }
    .login-motto span { font-size: 7px; }
    .login-promise { top: 100px; left: auto; max-width: none; font-size: 21px; }
    .modern-login-shell { width: 406px; max-width: 100%; margin: 0; min-height: 485px; }
    .modern-login-form-side { padding: 30px clamp(22px, 8vw, 55px) 65px; }
    .modern-login-heading { font-size: 20px; margin-left: -15px; margin-right: -15px; margin-bottom: 42px; }
    .login-signature { display: none; }
    .modern-login-page::after { bottom: 22px; }
}