/* =========================================================
   IDMS MODERN LOGIN
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    min-height: 100%;
}


body.idms-login-body {
    min-height: 100vh;

    color: #172033;

    background:
            linear-gradient(
                    135deg,
                    #edf5f9 0%,
                    #f7fafc 50%,
                    #e9f2f7 100%
            );

    font-family:
            "Segoe UI",
            Arial,
            Helvetica,
            sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* =========================================================
   SHELL
   ========================================================= */

.idms-login-shell {
    display: grid;

    grid-template-columns:
        minmax(420px, 0.95fr)
        minmax(420px, 1.05fr);

    min-height: 100vh;
}


/* =========================================================
   BRAND PANEL
   ========================================================= */

.idms-login-brand-panel {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 100vh;

    overflow: hidden;

    color: #ffffff;

    background:
            linear-gradient(
                    145deg,
                    #061f35 0%,
                    #0b3555 48%,
                    #075f88 100%
            );
}


.idms-login-brand-panel::before {
    content: "";

    position: absolute;

    top: -170px;
    right: -110px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(0, 196, 255, 0.22) 0%,
                    rgba(0, 196, 255, 0) 72%
            );
}


.idms-login-brand-panel::after {
    content: "";

    position: absolute;

    bottom: -220px;
    left: -150px;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    background:
            radial-gradient(
                    circle,
                    rgba(255, 255, 255, 0.08) 0%,
                    rgba(255, 255, 255, 0) 72%
            );
}


.idms-login-brand-overlay {
    position: absolute;

    inset: 0;

    background:
            linear-gradient(
                    180deg,
                    rgba(3, 26, 44, 0.05),
                    rgba(3, 26, 44, 0.16)
            );
}


.idms-login-brand-content {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    padding:
            52px
            60px;
}


/* =========================================================
   BRAND LOGO
   ========================================================= */

.idms-login-logo-wrap {
    margin-bottom: 44px;
}


.idms-login-logo {
    display: block;

    width: auto;
    max-width: 500px;
    max-height: 500px;

    border-radius: 10px;

    background: #ffffff;

    box-shadow:
            0 8px 24px
            rgba(0, 0, 0, 0.18);
}

/* =========================================================
   BRAND COPY
   ========================================================= */

.idms-login-eyebrow {
    display: inline-flex;

    margin-bottom: 13px;

    padding:
            5px
            10px;

    border:
            1px solid
            rgba(255, 255, 255, 0.22);

    border-radius: 20px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.88
            );

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.08
            );

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.9px;

    text-transform: uppercase;
}


.idms-login-brand-copy h1 {
    max-width: 600px;

    margin:
            0
            0
            18px;

    color: #ffffff;

    font-size: 42px;
    font-weight: 750;

    line-height: 1.12;
}


.idms-login-brand-copy p {
    max-width: 570px;

    margin: 0;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.77
            );

    font-size: 15px;

    line-height: 1.65;
}


/* =========================================================
   BRAND FOOTER
   ========================================================= */

.idms-login-brand-footer {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;

    margin-top: 38px;
}


.idms-login-brand-footer span {
    display: inline-flex;
    align-items: center;

    min-height: 31px;

    padding:
            6px
            10px;

    border:
            1px solid
            rgba(
                    255,
                    255,
                    255,
                    0.15
            );

    border-radius: 17px;

    color:
            rgba(
                    255,
                    255,
                    255,
                    0.82
            );

    background:
            rgba(
                    255,
                    255,
                    255,
                    0.06
            );

    font-size: 10px;
    font-weight: 600;
}


/* =========================================================
   FORM PANEL
   ========================================================= */

.idms-login-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 100vh;

    padding:
            45px
            55px;
}


/* =========================================================
   FORM WRAP
   ========================================================= */

.idms-login-form-wrap {
    width: 100%;
    max-width: 500px;
}


/* =========================================================
   FORM HEADER
   ========================================================= */

.idms-login-form-header {
    margin-bottom: 24px;
}


.idms-login-form-eyebrow {
    display: inline-flex;

    margin-bottom: 8px;

    padding:
            4px
            8px;

    border-radius: 15px;

    color: #087eb0;

    background: #e8f6fc;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.7px;

    text-transform: uppercase;
}


.idms-login-form-header h2 {
    margin:
            0
            0
            8px;

    color: #133a56;

    font-size: 30px;
    font-weight: 750;
}


.idms-login-form-header p {
    margin: 0;

    color: #697b89;

    font-size: 13px;

    line-height: 1.55;
}


/* =========================================================
   LOGIN FORM CARD
   ========================================================= */

.idms-login-form-content {
    width: 100%;

    padding:
            24px
            26px;

    border:
            1px solid
            #d6e2e9;

    border-radius: 16px;

    background:
            linear-gradient(
                    180deg,
                    #ffffff 0%,
                    #fbfdfe 100%
            );

    box-shadow:
            0 12px 34px
            rgba(
                    17,
                    54,
                    79,
                    0.10
            );
}


/* =========================================================
   LEGACY FORM NORMALISATION
   ========================================================= */

.idms-login-form-content form {
    width: 100% !important;

    margin: 0 !important;
}


.idms-login-form-content table {
    width: 100% !important;

    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse !important;

    background: transparent !important;
}


.idms-login-form-content tr,
.idms-login-form-content td {
    border: 0 !important;

    background: transparent !important;
}


.idms-login-form-content td {
    padding:
            6px
            0 !important;

    color: #415567 !important;

    font-size: 13px !important;
}


/* =========================================================
   LABELS
   ========================================================= */

.idms-login-form-content label,
.idms-login-form-content .form_main_label,
.idms-login-form-content .form_main_label_wide {
    display: block !important;

    width: 100% !important;

    margin:
            0
            0
            5px !important;

    float: none !important;

    color: #405668 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.idms-login-form-content
input[type="text"],

.idms-login-form-content
input[type="password"],

.idms-login-form-content
input[type="email"],

.idms-login-form-content
select {
    width: 100% !important;
    min-height: 43px;

    margin:
            0
            0
            10px !important;

    padding:
            9px
            11px !important;

    border:
            1px solid
            #c9d8e1 !important;

    border-radius:
            9px !important;

    color: #263f52 !important;

    background:
            #ffffff !important;

    font-family: inherit !important;

    font-size: 13px !important;

    outline: none !important;

    box-shadow: none !important;

    transition:
            border-color 150ms ease,
            box-shadow 150ms ease;
}


.idms-login-form-content
input[type="text"]:focus,

.idms-login-form-content
input[type="password"]:focus,

.idms-login-form-content
input[type="email"]:focus,

.idms-login-form-content
select:focus {
    border-color:
            #0798d3 !important;

    box-shadow:
            0 0 0 3px
            rgba(
                    7,
                    152,
                    211,
                    0.10
            ) !important;
}


/* =========================================================
   LOGIN BUTTON
   ========================================================= */

.idms-login-form-content
input[type="submit"],

.idms-login-form-content
input[type="button"],

.idms-login-form-content
button {
    width: 100% !important;

    min-height: 44px;

    margin-top: 6px !important;

    padding:
            9px
            14px !important;

    border:
            1px solid
            #087caf !important;

    border-radius:
            9px !important;

    color:
            #ffffff !important;

    background:
            linear-gradient(
                    180deg,
                    #0798d3 0%,
                    #087aab 100%
            ) !important;

    font-family:
            inherit !important;

    font-size:
            13px !important;

    font-weight:
            700 !important;

    cursor:
            pointer !important;

    box-shadow:
            0 5px 12px
            rgba(
                    7,
                    125,
                    175,
                    0.17
            );

    transition:
            transform 140ms ease,
            box-shadow 140ms ease;
}


.idms-login-form-content
input[type="submit"]:hover,

.idms-login-form-content
input[type="button"]:hover,

.idms-login-form-content
button:hover {
    transform:
            translateY(
                    -1px
            );

    box-shadow:
            0 8px 18px
            rgba(
                    7,
                    125,
                    175,
                    0.24
            );
}


/* =========================================================
   FORM LINKS
   ========================================================= */

.idms-login-form-content a {
    color:
            #087fb3 !important;

    font-size:
            12px !important;

    font-weight:
            600 !important;

    text-decoration:
            none !important;
}


.idms-login-form-content a:hover {
    text-decoration:
            underline !important;
}


/* =========================================================
   ERROR / MESSAGE TEXT
   ========================================================= */

.idms-login-form-content
.error,

.idms-login-form-content
.required,

.idms-login-form-content
.form_error {
    color:
            #b84444 !important;

    font-size:
            11px !important;

    font-weight:
            600 !important;
}


/* =========================================================
   SUPPORT
   ========================================================= */

.idms-login-support {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    margin-top: 18px;

    padding:
            14px
            15px;

    border:
            1px solid
            #d9e5eb;

    border-radius: 11px;

    background:
            #f7fafc;
}


.idms-login-support-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex:
            0
            0
            37px;

    width: 37px;
    height: 37px;

    border-radius: 9px;

    color: #087eb0;

    background: #e6f5fb;
}


.idms-login-support-icon svg {
    width: 19px;
    height: 19px;
}


.idms-login-support strong {
    display: block;

    margin-bottom: 4px;

    color: #30495c;

    font-size: 12px;
}


.idms-login-support span {
    display: block;

    margin-top: 2px;

    color: #778792;

    font-size: 11px;

    line-height: 1.45;
}


.idms-login-support a {
    color: #087fb3;

    font-weight: 600;

    text-decoration: none;
}


.idms-login-support a:hover {
    text-decoration: underline;
}


/* =========================================================
   PRODUCT
   ========================================================= */

.idms-login-product {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    margin-top: 20px;

    color: #8996a0;

    font-size: 10px;
}


.idms-login-tiga {
    display: block;

    width: auto;
    height: 22px;

    object-fit: contain;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1000px) {

    .idms-login-shell {
        grid-template-columns: 1fr;
    }


    .idms-login-brand-panel {
        min-height: auto;
    }


    .idms-login-brand-content {
        padding:
                34px
                32px;
    }


    .idms-login-brand-copy h1 {
        font-size: 32px;
    }


    .idms-login-form-panel {
        min-height: auto;

        padding:
                38px
                24px
                50px;
    }

}


@media screen and (max-width: 600px) {

    .idms-login-brand-content {
        padding:
                26px
                20px;
    }


    .idms-login-logo-wrap {
        margin-bottom: 24px;
    }


    .idms-login-brand-copy h1 {
        font-size: 27px;
    }


    .idms-login-brand-footer {
        display: none;
    }


    .idms-login-form-panel {
        padding:
                28px
                15px
                38px;
    }


    .idms-login-form-content {
        padding:
                20px
                18px;
    }


    .idms-login-form-header h2 {
        font-size: 25px;
    }

}