* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --ims-primary: #bb302c;
    --ims-primary-dark: #ad4b47 ;
    --ims-border: #dcecdf;
    --ims-text: #1e293b;
    --ims-muted: #64748b;
}

html,
body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    /* overflow: hidden; */
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--ims-text);
    background: #ffffff;
}

img {
    border: 0 none;
    max-width: 100%;
}

a {
    text-decoration: none;
}

.fix {
    overflow: hidden;
}

.main {
    position: relative;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow: hidden;
    padding-top: clamp(0.75rem, 2.2vh, 1.5rem);
    padding-bottom: clamp(0.75rem, 2.2vh, 1.5rem);
    background: linear-gradient(180deg, #ad4b47 0%, #c4706d 28%, #eccfcb 46%, #fbf4f3 60%);
}

.structure {
    width: 100%;
    max-width: min(92vw, 520px);
    margin: 0 auto;
}

.header_area {
    background: transparent;
    border-bottom: 0;
    padding: 12px 16px 0;
}

.header {
    padding: 0;
    text-align: center;
    min-height: 1px;
}

.header img {
    width: 100%;
    max-width: 270px;
}

.main_body_area {
    flex: 1 1 auto;
    min-height: 0;
    padding: clamp(0.75rem, 1.8vh, 1.25rem) clamp(0.75rem, 2.8vw, 1rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main_body {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    position: relative;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    transform: none;
}

.hero-logo {
    width: 100%;
    max-width: min(80vw, 420px);
    height: clamp(69px, 10.25vh, 100px);
    margin: 0 auto clamp(10px, 2vh, 20px);
    background-image: url("/images/IMS-ICO3.png"), url("/latest/img/login/head_text.png");  /* Not use /ims.ICO beacuse of blur */
    background-repeat: no-repeat, no-repeat;
    background-position: left center, right center;
    background-size: clamp(57px, 8.2vh, 82px) clamp(57px, 8.2vh, 82px), calc(100% - clamp(67px, 9.5vh, 98px)) auto;
}

.hero-banner {
    width: 100%;
    max-height: min(34vh, 23rem);
    height: clamp(155px, 28vh, 250px);
    margin: 0 auto clamp(14px, 3vh, 32px);
    background: url("/latest/img/login/inventory-banner.png") center/contain no-repeat;
}

.home-copy h4 {
    font-size: clamp(15px, 2.2vw, 18px);
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 4px;
}

.home-copy p {
    font-size: clamp(13px, 1.9vw, 16px);
    color: #6b7280;
    margin: 0 0 clamp(18px, 3.8vh, 36px);
}

.cta-actions {
    width: 100%;
    max-width: min(78vw, 320px);
    margin: 0 auto;
}

.action-btn {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 999px;
    text-align: center;
    padding: clamp(9px, 1.7vh, 12px) 16px;
    font-size: clamp(13px, 1.8vw, 14px);
    font-weight: 600;
    color: #fff;
    line-height: 1;
}

.primary-btn,
.secondary-btn,
#submitLogin {
    background: linear-gradient(180deg, var(--ims-primary) 0%, var(--ims-primary-dark) 100%);
    border: 0 !important;
    box-shadow: none !important;
}

.secondary-btn {
    margin-top: 10px;
}

.footer_area {
    display: none;
}

.modal-backdrop.in {
    opacity: 0.65;
}

.modal.modal-bottom {
    padding: 0 !important;
}

.modal.fade.modal-bottom .modal-dialog,
.modal.modal-bottom .modal-dialog,
.modal-bottom .modal-dialog {
    position: fixed;
    left: 0;
    right: 0;
    top: auto !important;
    bottom: -1px;
    margin: 0 auto !important;
    width: 100%;
    max-width: 560px;
    -webkit-transform: translate3d(0, 105%, 0) !important;
    transform: translate3d(0, 105%, 0) !important;
    -webkit-transition: -webkit-transform 0.32s ease-out;
    transition: transform 0.32s ease-out;
    will-change: transform;
}

.modal.fade.modal-bottom.in .modal-dialog,
.modal.modal-bottom.in .modal-dialog,
.modal-bottom.in .modal-dialog {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
}

.modal-login .modal-content,
.login-modal-content {
    border: none;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.modal-body {
    padding: 14px 14px 16px;
}

.modal-body h3,
.modal-body h5 {
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 2px;
    color: #1e293b;
}

.modal-subtitle {
    text-align: center;
    color: #64748b;
    font-size: 13px;
    margin-bottom: 14px;
}

.error-title {
    color: #dc2626;
    text-align: center;
    font-size: 16px;
    margin: 4px 0;
}

.error-msg,
.state-msg {
    text-align: center;
    color: #dc2626;
    font-size: 13px;
    margin: 0 0 10px;
}

.state-msg {
    color: #334155;
}

.input {
    margin-top: 0;
    background: transparent;
    border: 0;
    padding: 0;
}

.input p {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
    margin-bottom: 6px;
    text-align: left;
}

.modal-login .input-group {
    position: relative;
    display: flex !important;
    align-items: stretch;
    width: 100%;
}

.modal-login .input-group .input-group-text {
    border: 1px solid #d0d5dd;
    border-right: 0;
    border-radius: 12px 0 0 12px;
    color: #dc2626;
    background: #fff;
    min-width: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.modal-login .input-group .input-group-text svg {
    display: block;
}

.modal-login .input-group .input-group-text i {
    font-size: 14px;
    line-height: 1;
}

.modal-login .input-group .form-control {
    border-left: 0;
    border-radius: 0 12px 12px 0;
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    margin-bottom: 0 !important;
    padding: 10px 12px;
    height: 42px;
    font-size: 14px;
    background: #fff;
    border-color: #d0d5dd;
}

.modal-login input[type="text"].form-control,
.modal-login input[type="password"].form-control,
.modal-login input[type="email"].form-control {
    width: 100% !important;
}

#password-visibility {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    z-index: 10;
    color: #0f2b63;
    line-height: 1;
    pointer-events: none;
}

.modal-login input[type="text"]:focus,
.modal-login input[type="password"]:focus,
.modal-login input[type="email"]:focus {
    border-color: var(--ims-primary);
    box-shadow: 0 0 0 3px rgba(140, 26, 26, 0.16);
    outline: none;
}

.sign {
    width: 100%;
    margin: 0;
}

#submitLogin {
    width: 100%;
    margin: 8px 0 0;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 12px;
    border-radius: 999px;
    color: #ffffff;
    cursor: pointer;
}

.form-check-label.small {
    font-size: 14px;
    color: #334155;
}

.small.text-decoration-none {
    font-size: 14px;
    color: #dc2626;
}

.modal-login .d-flex.align-items-center.justify-content-between.mb-3 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 12px;
}

.modal-login .form-check {
    margin-bottom: 0;
}

.modal-login .modal-content,
.login-modal-content {
    border: none;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.28);
    overflow: hidden;
}

.modal-body {
    padding: 22px 22px 24px !important;
}

.modal-body h3,
.modal-body h5 {
    font-size: 40px;
    margin-bottom: 1px;
}

.modal-subtitle {
    color: #64748b;
    margin-bottom: 16px;
}

.modal-login .input-group .input-group-text,
.modal-login .input-group .form-control {
    background-color: #ffffff;
    border-color: #d1d9d4;
}

.modal-login .mb-3 {
    margin-bottom: 24px !important;
}

.modal-login .form-label {
    margin-bottom: 6px;
    display: inline-block;
}

.modal-login .input-group {
    margin-top: 2px;
}

.modal-login .input-group .form-control::placeholder {
    color: #8b939f;
}

.modal-login .input-group .form-control {
    height: 44px;
    border-radius: 0 12px 12px 0;
}

.modal-login .input-group .input-group-text {
    border-radius: 12px 0 0 12px;
}

#password {
    padding-right: 40px;
}

#password-visibility {
    right: 14px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-login .d-flex.align-items-center.justify-content-between.mb-3 {
    margin-top: 2px;
    margin-bottom: 22px !important;
}

#submitLogin,
.modal-signup {
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    padding-top: 12px;
    padding-bottom: 12px;
    width: calc(100% + 8px) !important;
    margin-left: -4px;
    margin-right: -4px;
}

#submitLogin:hover,
.modal-signup:hover,
.primary-btn:hover,
.secondary-btn:hover {
    filter: brightness(1.02);
}

.modal-signup {
    margin-top: 14px;
}

#submitLogin:hover {
    filter: brightness(0.98);
}

/* Final modal polish overrides */
.modal-login .modal-body h5#loginModalLabel {
    font-size: 28px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
}

.modal-login .modal-body p.text-center.text-muted.mb-4 {
    text-align: center !important;
    margin-bottom: 22px !important;
    color: #5f6b7a !important;
    font-size: 13px !important;
}

.modal-login .form-label.small {
    color: #334155 !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;
}

.modal-login .input-group {
    border: 1px solid #c7a5a4 !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

.modal-login .input-group .input-group-text,
.modal-login .input-group .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
}

.modal-login .input-group .input-group-text {
    color: #b25754 !important;
}

.modal-login .input-group:focus-within {
    box-shadow: 0 0 0 3px rgba(140, 26, 26, 0.14) !important;
}

.modal-login .input-group .form-control {
    height: 46px !important;
    padding: 11px 12px !important;
    font-size: 15px !important;
    color: #1e293b !important;
}

.modal-login .input-group .form-control::placeholder {
    color: #8b939f !important;
}

#password-visibility {
    color: #dc2626 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 20 !important;
}

.modal-login .modal-dialog {
    max-width: min(92vw, 760px);
}

/* Override legacy lessframework min-height that pushes content downward on mobile */
.main_body_area {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
}