/*#region *** loginContainer, login-widget ****/
html,
body {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    background-color: #000000;
    font-family: 'Segoe UI';
    font-weight: 400;
}

*,
*::before,
*:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

form#loginForm {
    height: 100%;
}

#usrLogin_loginContainer {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    overflow: hidden;
}

    #usrLogin_loginContainer #login-widget .login-buttons .login-button-wrap input {
        width: 100%;
        height: 100%;
        border: none;
        outline: none;
        border-radius: 50px;
        background: transparent;
        color: white;
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        text-shadow: 0 0px 4px black;
        position: relative;
        z-index: 1;
    }


    /* Glassmorphism Login Widget Panel */
    #usrLogin_loginContainer #login-widget {
        display: flex;
        position: relative;
        z-index: 5;
        min-height: 680px;
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        justify-content: center;
        width: min(100vw, 430px);
        border-radius: 16px;
        padding: clamp(10px, 2.4vw, 18px) clamp(6px, 1.8vw, 14px) 14px;
        margin: 12px;
        /* Glassmorphism effect */
    }
        /*#endregion*/

        /*#region *** login-header ****/
        #usrLogin_loginContainer #login-widget .login-header h2,
        #usrLogin_loginContainer #login-widget .login-header h3 {
            font-size: 33px;
            font-family: 'Segoe UI';
            margin: 4px 0;
        }

        #usrLogin_loginContainer #login-widget .login-header h2 {
            /* margin-top: 10px; */
        }

        #usrLogin_loginContainer #login-widget .login-header h3 {
           
            color: #ff0000;
            margin-top: 5px;
            font-size: clamp(43px, 13.8vw, 62px);
            line-height: .95;
            font-weight: 900;
            letter-spacing: 1px;
        }


    /*#endregion*/
   
    /*#region *** input-control ****/
    /* Glassmorphism Input Controls */
    #usrLogin_loginContainer #login-widget .input-control {
        
        margin-bottom: 24px;
        margin-top: 8px;
        border-radius: 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: left;
        -ms-flex-pack: left;
        justify-content: left;
        position: relative;
        /* Glassmorphism effect */
        background: linear-gradient(90deg, rgba(1, 12, 28, .80), rgba(10, 26, 52, .57));
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 22px rgba(0, 0, 0, .30), 0 10px 28px rgba(0, 0, 0, .26);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 11px;
        border: 1px solid rgba(215, 226, 245, .58);
    }

        #usrLogin_loginContainer #login-widget .input-control:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.18);
        }

.phoenix-mission-quote {
    text-align: center;
    color: rgb(246 251 255);
    font-size: 14px;
    font-style: italic;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    display: none;
}

.phoenix-mission-quote {
    padding-top: 12px;
    font-size: 13px;
}

#usrLogin_loginContainer #login-widget .input-control .icon-box {
    width: 64px;
    align-self: stretch;
    display: grid;
    place-items: center;
    background: rgba(18, 30, 52, .64);
    border-right: 1px solid rgba(255, 255, 255, .08);
    flex: 0 0 60px;
    border-radius: 11px 0px 0px 11px;
}

    #usrLogin_loginContainer #login-widget .input-control .icon-box .icon {
        width: 26px;
        height: 26px;
        color: rgba(232, 239, 251, .88);
        opacity: .96;
    }

/* Standalone right-icon (e.g. dropdown arrow) — absolutely positioned */
.input-control > svg.right-icon {
    position: absolute;
    right: 20px;
    width: 21px;
    height: 21px;
    color: rgba(230, 238, 248, .85);
    pointer-events: none;
}

/* Hide any standalone right-icon on the password row — pwd-eye-btn handles it */
.input-control:has(.pwd-eye-btn) > svg.right-icon {
    display: none !important;
}

/* Password eye toggle button */
.pwd-eye-btn {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: .78;
    transition: opacity .2s;
    color: rgba(230, 238, 248, .85);
}

    .pwd-eye-btn:hover {
        opacity: 1;
    }

    .pwd-eye-btn:focus {
        outline: none;
    }

    /* SVGs inside the button — static, white, correct size */
    .pwd-eye-btn .right-icon,
    .pwd-eye-btn .pwd-eye-icon {
        position: static !important;
        width: 21px !important;
        height: 21px !important;
        pointer-events: none;
        color: rgba(230, 238, 248, .85) !important;
        stroke: rgba(230, 238, 248, .85) !important;
    }

/* Give the password input right padding so text doesn't overlap the eye icon */
#usrLogin_loginContainer #login-widget .input-control .login-input.pass {
    padding-right: 48px !important;
}

#usrLogin_loginContainer #login-widget .input-control .login-input {
    padding: 12px 8px;
    font-size: 24px;
    color: rgba(255, 255, 255, 100%);
    background: none;
    outline: none;
    border: none;
    width: 100%;
}

#Selectdatabase option {
    color: #000000;
}

#usrLogin_DrpJuris #login-widget .input-control .login-input {
    padding: 12px 8px;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.6);
    background: none;
    outline: none;
    border: none;
    width: 100%;
}

#usrLogin_DrpJuris option {
    color: #000000;
}

.login-input {
    /*color: #ffffff !important;*/
}

#usrLogin_loginContainer #login-widget .input-control .select-options {
    /*Commented By Jebaz For CRM#166381*/
    /*width: 80%;*/
    /*Added By Jebaz For CRM#166381*/
    width: 98%;
    padding-right: 21px;
}

    #usrLogin_loginContainer #login-widget .input-control .select-options select option {
        height: 32px;
        /*color: inherit;*/
        color: #000000;
    }

#usrLogin_loginContainer #login-widget .input-control.set-focus,
#usrLogin_loginContainer #login-widget .input-control:focus-within {
    border-radius: 11px !important;
    border-color: rgba(80, 205, 255, .88) !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

#usrLogin_loginContainer #login-widget .input-control.set-focus,
#usrLogin_loginContainer #login-widget .input-control:focus-within {
    border-radius: 11px !important;
    border-color: rgba(80, 205, 255, .88) !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

    #usrLogin_loginContainer #login-widget .input-control.set-focus .icon-box .icon {
        fill: #D !important;
    }

    #usrLogin_loginContainer #login-widget .input-control.set-focus .login-input {
        color: rgba(255, 255, 255, 0.95) !important;
    }
/*#endregion*/

/*#region *** login-buttons ****/
#usrLogin_loginContainer #login-widget .login-buttons {
    /* display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(126px, .52fr); */
    display: flex;
    margin-top: 30px;
    width: 100%;
    align-items: stretch;
    justify-content: space-between;
}

#usrLogin_loginContainer #login-widget .input-control.fire,
#usrLogin_loginContainer #login-widget .input-control.fire:focus-within,
#usrLogin_loginContainer #login-widget .input-control.fire.set-focus {
    border-radius: 11px !important;
    border: 1px solid rgba(255, 176, 82, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(255, 110, 22, .14), 0 0 22px rgba(255, 92, 20, .28) !important;
}

#usrLogin_loginContainer #login-widget .input-control.fire,
#usrLogin_loginContainer #login-widget .input-control.fire,
#usrLogin_loginContainer #login-widget .input-control.fire {
    position: relative;
    display: flex;
    align-items: center;
    height: clamp(48px, 7.4vh, 58px);
    border: 1px solid var(--field-border);
    border-radius: 11px;
    background: linear-gradient(90deg, rgba(31, 8, 5, .82), rgba(58, 22, 12, .60));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 22px rgba(0, 0, 0, .30), 0 10px 28px rgba(0, 0, 0, .26);
    overflow: hidden;
    backdrop-filter: blur(4px);
}

/* LOGIN wrapper — blue gradient capsule */
#usrLogin_loginContainer #login-widget .login-buttons .login-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: clamp(56px, 8.6vh, 60px);
    border: 1px solid rgba(28,196,255,.74);
    border-radius: 11px;
    overflow: hidden;
    background: linear-gradient(180deg, #19c8ff, #005ccf 58%, #0048ad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 19px rgba(0,157,255,.34), 0 12px 26px rgba(0,0,0,.30);
    width: 45%;
}

/* Shared button base */
#usrLogin_loginContainer #login-widget .login-buttons .login-form-btn {
    border: 0;
    color: #fff !important;
    font-size: clamp(16px, 4.8vw, 20px);
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    letter-spacing: .1px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0,0,0,.45);
    text-transform: uppercase;
    outline: none;
    position: relative;
    width: 100%;
}

    /* LOGIN button — transparent inside the blue combo wrapper */
    #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.submit {
        background: transparent;
        height: 100%;
        box-shadow: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    /* RESET button — dark glass style */
    #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset {
        height: clamp(56px, 8.6vh, 60px);
        border-radius: 11px;
        border: 1px solid rgba(255,255,255,.42) !important;
        background: linear-gradient(180deg, rgba(88,92,103,.86), rgba(37,41,52,.92) 55%, rgba(19,22,31,.96));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 24px rgba(0,0,0,.30);
        margin: 0;
        width: 45%;
    }

    /* Abandon button */
    #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.abandon {
        display: none;
        background: transparent;
        height: 100%;
        margin: 0;
        padding: 0;
    }

#usrLogin_loginContainer.abandon #login-widget .login-buttons .login-form-btn.abandon {
    display: inline-block;
}

/* Active press effect */
#usrLogin_loginContainer #login-widget .login-buttons .login-combo:active,
#usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset:active {
    transform: translateY(1px);
}

/* Hover glow */
#usrLogin_loginContainer #login-widget .login-buttons .login-combo:hover {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 0 28px rgba(0,157,255,.52), 0 12px 26px rgba(0,0,0,.30);
}

#usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset:hover,
#usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset:focus {
    border-color: rgba(80, 205, 255, .88) !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

#usrLogin_loginContainer .login-combo:focus {
    border-color: rgba(80, 205, 255, .88) !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

/* Remove old :after sheen — handled by reference gradient */
#usrLogin_loginContainer #login-widget .login-buttons .login-form-btn:after {
    display: none;
}
/*#endregion*/
.footer-overall {
    padding: 6px 16px;
    margin-bottom: 2px;
}
/*#region *** Forgot Pwd ****/
#usrLogin_upForgotPwd {
    /*Commented By Jebaz For CRM#166381*/
    /*color: #cccccc;*/
    /*Added By Jebaz For CRM#166381*/
    /* color: #2B97F1;
    font-family: 'Segoe UI';
    font-size: 24px;
    font-weight: normal;
    text-decoration: underline;
    padding-top: 14px;
    cursor: pointer; */
    display: inline-block;
    justify-self: center;
    color: rgb(140, 188, 255);
    font-size: 24px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    cursor: pointer;
    position: relative;
    bottom: -22px;
    padding: 6px 16px;
}

p#usrLogin_forgethide {
    margin: 6px;
}

#usrLogin_upForgotPwd a:focus {
    /* padding: 8px;
        border-radius: 4px;
        border: 1px dashed rgba(255,255,255,0.3);
        outline: none; */
    display: inline-block;
    justify-self: center;
    margin-top: 2px;
    color: rgb(140, 188, 255);
    font-size: 24px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
    cursor: pointer;
}

.login-container.crm.crm-login-page a.forgot-pwd {
    display: none;
}

/* Remove underline from forgot-pwd labels (Azure AD login) */
.forgot-transform {
    text-decoration: underline !important;
}
/*#endregion*/


/*#region law-mobile added for CRM#196123*/

#usrLogin_loginContainer.law-mobile {
    background-image: url('../../images/phoenixlogin/Law_Single_Bg.jpg');
}

    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        /* background-color: #00B0FF; */
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        /* background-color: #00B0FF; */
        transition: 0.2s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.law-mobile .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.law-mobile #login-widget {
        /*border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;*/
    }

        #usrLogin_loginContainer.law-mobile #login-widget h2 {
            color: #D8D8D8;
        }

    #usrLogin_loginContainer.law-mobile .login-buttons .login-form-btn.submit {
        margin-right: 46px !important;
        background-color: #2897f191 !important;
        color: #cfcdcd !important;
    }

    #usrLogin_loginContainer.law-mobile .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
    }

        #usrLogin_loginContainer.law-mobile .input-control.set-focus .icon-box {
            /* background-color: #00B0FF !important; */
        }

    #usrLogin_loginContainer.law-mobile .login-buttons .login-button-wrap.submit {
        /* background-color: #00B0FF !important; */
    }


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.law-mobile #login-widget {
        background-image: url(../../Images/PhoenixLogin/widget-bg-ie.jpg);
    }

    #usrLogin_loginContainer.law-mobile {
        background-image: url(../../Images/PhoenixLogin/PoliceCar_Light_ie.png);
    }

        #usrLogin_loginContainer.law-mobile #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/
input#usrLogin_btnReset {
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .42);
    background: linear-gradient(180deg, rgba(88, 92, 103, .86), rgba(37, 41, 52, .92) 55%, rgba(19, 22, 31, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .30);
}
/*#region *** LAW ****/
#usrLogin_loginContainer.law {
    /*Commented By Jebaz For CRM#166381*/
    /*background-image: url("../../images/PhoenixLogin/PoliceCar_Light_Animate_2024.jpg");*/
    /*Added By Jebaz For CRM#166381*/
    /*background-image: url('../../images/phoenixlogin/Law_Double_Bg.jpg');*/
    /* Phoenix 2027 bird — full image, black fills left/right */
    background-color: #000000;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

.pp-wn-sub {
    color: rgba(232,244,255,.76);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    /* background-color: #00B0FF; */
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    /* background-color: #00B0FF; */
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border i:before,
#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    /* background-color: #00B0FF; */
    transition: 0.2s;
}

#usrLogin_loginContainer.law .input-control .effect-9 ~ .focus-border i:after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border:before,
#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border:after {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border:after {
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border i:before,
#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border i:after {
    height: 100%;
    transition: 0.2s;
}

#usrLogin_loginContainer.law .input-control .effect-9:focus ~ .focus-border i:after {
    transition-delay: 0.4s;
}

/*#usrLogin_loginContainer.law #login-widget {*/
/*border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;*/
/*right: 637px !important;
        top: -97px;
    }
#usrLogin_loginContainer.fire #login-widget {*/
/*border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;*/
/*right: 637px !important;
    top: -97px;
}*/
/*#usrLogin_loginContainer.fire #login-widget {*/
/*border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;*/
/*right: 637px !important;
    top: -97px;
}*/
#usrLogin_loginContainer.law #login-widget h2 {
    /*Commented By Jebaz For CRM#166381*/
    /*color: #00B0FF !important;*/
    /*Added By Jebaz For CRM#166381*/
    color: #ffffff;
    font-size: clamp(41px, 13vw, 58px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
}

/* .law: the login-combo already has the blue gradient from base styles — no override needed */
#usrLogin_loginContainer.law .login-buttons .login-form-btn.submit {
    background: transparent;
    border: none;
    color: #f5f5f5 !important;
}

#usrLogin_loginContainer.law .input-control.set-focus,
#usrLogin_loginContainer.law .input-control:focus-within {
    border-radius: 11px !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

    #usrLogin_loginContainer.law .input-control.set-focus .icon-box {
        background-color: #00B0FF !important;
    }

#usrLogin_loginContainer.law .login-buttons .login-button-wrap.submit {
    background-color: #00B0FF !important;
}


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.law #login-widget {
        background-image: url(../../Images/PhoenixLogin/widget-bg-ie.jpg);
    }

    #usrLogin_loginContainer.law {
        background-image: url(../../Images/PhoenixLogin/PoliceCar_Light_ie.png);
    }

        #usrLogin_loginContainer.law #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** Fire, EZ Fire, EZ CRM ****/
#usrLogin_loginContainer.fire {
    /*Commented By Jebaz For CRM#166381*/
    /*background-image: url("../../images/PhoenixLogin/Firerms_2024.jpg");*/
    /*Added By Jebaz For CRM#166381*/
    background-image: url("../../images/phoenixlogin/PhoenixBirdBg2027.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        /* background-color: #F23729; */
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        /* background-color: #F23729; */
        transition: 0.2s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.fire .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }

    /*Commented By Jebaz For CRM#166381*/
    /*#usrLogin_loginContainer.fire #login-widget {
        border: 1px solid rgba(242, 55, 41, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
    }*/
    #usrLogin_loginContainer.fire #login-widget h2 {
        /*color: #F23729 !important;*/
        color: #ffffff;
        font-size: clamp(41px, 13vw, 58px);
        line-height: .98;
        font-weight: 900;
        letter-spacing: -2px;
    }

    #usrLogin_loginContainer.fire .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
        box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
    }

        #usrLogin_loginContainer.fire .input-control.set-focus .icon-box {
            background-color: #F23729 !important;
        }

#usrLogin_loginContainer .login-buttons .login-form-btn[type=submit] {
    /*Added By Jebaz For CRM#166381*/
    margin-left: -1px !important;
    color: #cfcdcd !important;
    /*Commented By Jebaz For CRM#166381*/
    /*background-color: #F23729 !important;*/
}

#usrLogin_loginContainer.fire .login-buttons .login-form-btn.submit {
    margin-left: -1px !important;
    margin-right: 36px !important;
    color: #cfcdcd !important;
    background: linear-gradient(180deg, #ff8a24, #e63b18 58%, #a71910) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 19px rgba(255, 90, 22, .38), 0 12px 26px rgba(0, 0, 0, .30) !important;
}

#usrLogin_loginContainer.fire #login-widget .input-control.set-focus, #usrLogin_loginContainer.fire #login-widget .input-control:focus-within {
    border-color: rgba(255, 176, 82, .88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(255, 110, 22, .14), 0 0 22px rgba(255, 92, 20, .28);
}

#usrLogin_loginContainer.fire #login-widget .input-control.set-focus,
#usrLogin_loginContainer.fire #login-widget .input-control:focus-within {
    border-color: rgba(255, 176, 82, .88) !important;
    border: 1px solid rgba(255, 176, 82, .88) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 2px rgba(255, 110, 22, .14), 0 0 22px rgba(255, 92, 20, .28) !important;
}

#usrLogin_loginContainer.fire #login-widget .input-control {
    border-color: rgba(255, 176, 82, .88);
    background: linear-gradient(90deg, rgba(31, 8, 5, .82), rgba(58, 22, 12, .60));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), inset 0 0 22px rgba(0, 0, 0, .30), 0 10px 28px rgba(0, 0, 0, .26);
    backdrop-filter: blur(4px);
}

    #usrLogin_loginContainer.fire #login-widget .input-control .icon-box {
        background: rgba(54, 22, 14, .66);
    }

#usrLogin_loginContainer.fire .login-buttons .login-form-btn.reset {
    margin-left: -1px !important;
    color: #cfcdcd !important;
    border: 1px solid rgba(255, 255, 255, .42);
    background: linear-gradient(180deg, rgba(88, 92, 103, .86), rgba(37, 41, 52, .92) 55%, rgba(19, 22, 31, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .30);
}

#usrLogin_loginContainer.fire #login-widget .login-buttons .login-combo {
    border: 1px solid rgba(255, 136, 48, .78) !important;
    background: linear-gradient(180deg, #ff8a24, #e63b18 58%, #a71910) !important;
}

#usrLogin_loginContainer.fire #login-widget .login-buttons .login-form-btn.reset {
    height: clamp(56px, 8.6vh, 60px);
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .42) !important;
    background: linear-gradient(180deg, rgba(88, 92, 103, .86), rgba(37, 41, 52, .92) 55%, rgba(19, 22, 31, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .30);
    margin: 0;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.fire #login-widget {
        background-image: url(../../Images/PhoenixLogin/6577_ie.jpg);
    }

    #usrLogin_loginContainer.fire {
        background-image: url(../../Images/PhoenixLogin/firerms_ie.jpg);
    }

        #usrLogin_loginContainer.fire #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** CMS ****/
#usrLogin_loginContainer.cms {
    background-image: url("../../images/phoenixlogin/PhoenixBirdBg2027.png");
    background-color: #000000;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        /* background-color: #19947A; */
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        /* background-color: #19947A; */
        transition: 0.2s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.cms .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }

    /*#usrLogin_loginContainer.cms #login-widget {
        border: 1px solid rgba(25, 148, 122, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(25, 148, 122, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(25, 148, 122, 0.8), 4px 4px 8px black;
    }*/

    #usrLogin_loginContainer.cms #login-widget h2 {
        color: #D8D8D8;
        font-size: clamp(41px, 13vw, 58px);
        line-height: .98;
        font-weight: 900;
        letter-spacing: -2px;
    }
/* Hide Edge/IE default password reveal button */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}

/* For newer Edge */
input::-ms-reveal {
    display: none;
}

/* Optional */
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
}

#usrLogin_loginContainer.cms .input-control.set-focus {
    -webkit-box-shadow: 0 0 6px 4px rgba(25, 148, 122, 0.4);
    box-shadow: 0 0 6px 4px rgba(25, 148, 122, 0.4);
}

    #usrLogin_loginContainer.cms .input-control.set-focus .icon-box {
        /* background-color: #19947A !important; */
    }

input#usrLogin_cmdLogin {
    background: linear-gradient(180deg, #19c8ff, #005ccf 58%, #0048ad);
}

#usrLogin_loginContainer.cms .login-buttons .login-form-btn .reset {
    /*Added By Jebaz For CRM#166381*/
    margin-right: 46px !important;
    background: linear-gradient(180deg, rgba(88, 92, 103, .86), rgba(37, 41, 52, .92) 55%, rgba(19, 22, 31, .96));
    color: #cfcdcd !important;
    /*Commented By Jebaz For CRM#166381*/
    /*background-color: #19947A !important;*/
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.cms #login-widget {
        background-image: url(../../Images/PhoenixLogin/CMS_Single_BG.jpg);
    }

    #usrLogin_loginContainer.cms {
        background-image: url(../../Images/PhoenixLogin/CMS_Single_BG.jpg);
    }

        #usrLogin_loginContainer.cms #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** CRM ****/
#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0094C2;
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.crm #login-widget .login-buttons .login-combo:has(:focus) {
    border-color: rgba(80, 205, 255, .88) !important;
    border: 1px solid rgba(80, 205, 255, .88) !important;
    box-shadow: 0 0 0 2px rgba(0, 174, 255, .15), 0 0 20px rgba(0, 169, 255, .30) !important;
}

#usrLogin_loginContainer.crm #login-widget .login-buttons .login-combo {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: clamp(56px, 8.6vh, 60px);
    border: 1px solid rgb(156 153 159);
    border-radius: 11px;
    overflow: hidden;
    background: linear-gradient(180deg, #19c8ff, #005ccf 58%, #0048ad);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 19px rgba(0, 157, 255, .34), 0 12px 26px rgba(0, 0, 0, .30);
}

#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border i:before,
#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background-color: #0094C2;
    transition: 0.2s;
}

#usrLogin_loginContainer.crm .input-control .effect-9 ~ .focus-border i:after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.crm {
    background-image: url("../../images/PhoenixLogin/PhoenixBirdBg2027.png");
}

    /*Z by Jebaz for CRM#167660*/
    /* #usrLogin_loginContainer.crm #login-widget {
        border: 1px solid rgba(0, 148, 194, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 148, 194, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 148, 194, 0.8), 4px 4px 8px black;
    }
*/
    #usrLogin_loginContainer.crm #login-widget h2 {
        /*Commented By Jebaz For CRM#166381*/
        /*color: #0094C2 !important;*/
        /*Added By Jebaz For CRM#166381*/
        color: #D8D8D8;
    }

    #usrLogin_loginContainer.crm .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 148, 194, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 148, 194, 0.4);
    }

        #usrLogin_loginContainer.crm .input-control.set-focus .icon-box {
            background-color: #0094C2 !important;
        }

    #usrLogin_loginContainer.crm .login-buttons .login-form-btn[type=submit] {
        /*Modified By Jebaz For CRM#166381*/
        background-color: #2897f191 !important;
        color: #cfcdcd !important;
    }


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.crm #login-widget {
        background-image: url(../../images/PhoenixLogin/Crm_2024.jpg);
    }

    #usrLogin_loginContainer.crm {
        background-image: url(../../images/PhoenixLogin/Crm_2024.jpg);
    }

        #usrLogin_loginContainer.crm #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** IA ****/
#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border i:before,
#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    transition: 0.2s;
}

#usrLogin_loginContainer.ia .input-control .effect-9 ~ .focus-border i:after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border:before,
#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border:after {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border:after {
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border i:before,
#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border i:after {
    height: 100%;
    transition: 0.2s;
}

#usrLogin_loginContainer.ia .input-control .effect-9:focus ~ .focus-border i:after {
    transition-delay: 0.4s;
}


#usrLogin_loginContainer.ia {
    background-image: url("../../images/phoenixlogin/PhoenixBirdBg2027.png");
}


    /*Commented By Jebaz For CRM#166381*/
    /*#usrLogin_loginContainer.ia #login-widget {
        border: 1px solid rgba(178, 84, 11, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(178, 84, 11, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(178, 84, 11, 0.8), 4px 4px 8px black;
    }*/

    #usrLogin_loginContainer.ia #login-widget h2 {
        /*Commented By Jebaz For CRM#166381*/
        /*color: #B2540B !important;*/
        /*Added By Jebaz For CRM#166381*/
        color: #D8D8D8;
        font-size: clamp(41px, 13vw, 58px);
        line-height: .98;
        font-weight: 900;
    }

    #usrLogin_loginContainer.ia .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(178, 84, 11, 0.4);
        box-shadow: 0 0 6px 4px rgba(178, 84, 11, 0.4);
    }

    /*        #usrLogin_loginContainer.ia .input-control.set-focus .icon-box {
            background-color: #B2540B !important;
        }*/

    #usrLogin_loginContainer.ia .login-buttons .login-form-btn[type=submit] {
        margin-left: -1px !important;
        /*        margin-right: 36px !important;*/
        background-color: #2897f191 !important;
        color: #cfcdcd !important;
        /*background-color: #B2540B !important;*/
    }


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.ia #login-widget {
        background-image: url(../../Images/PhoenixLogin/ia-widget_ie.jpg);
    }

    #usrLogin_loginContainer.ia {
        background-image: url(../../Images/PhoenixLogin/legal-success_ie.jpg);
    }

        #usrLogin_loginContainer.ia #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** CAD Admin ****/
#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #00B0FF;
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border i:before,
#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background-color: #00B0FF;
    transition: 0.2s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9 ~ .focus-border i:after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border:before,
#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border:after {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border:after {
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border i:before,
#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border i:after {
    height: 100%;
    transition: 0.2s;
}

#usrLogin_loginContainer.cadadmin .input-control .effect-9:focus ~ .focus-border i:after {
    transition-delay: 0.4s;
}


#usrLogin_loginContainer.cadadmin {
    background-image: url("../../Images/PhoenixLogin/CadAdmin2024.jpg");
}


    /* #usrLogin_loginContainer.cadadmin #login-widget {
        border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
    }*/

    #usrLogin_loginContainer.cadadmin #login-widget h2 {
        /*Commented By Jebaz For CRM#167660 */
        /*color: #00B0FF !important;*/
        /*Added By Jebaz For CRM#167660 */
        color: #D8D8D8;
    }

    #usrLogin_loginContainer.cadadmin .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
    }

        #usrLogin_loginContainer.cadadmin .input-control.set-focus .icon-box {
            background-color: #00B0FF !important;
        }

    #usrLogin_loginContainer.cadadmin .login-buttons .login-form-btn[type=submit] {
        /*Added By Jebaz For CRM#167660 */
        margin-right: 46px !important;
        background-color: #2897f191 !important;
        color: #cfcdcd !important;
        /*Commented By Jebaz For CRM#167660 */
        /*background-color: #00B0FF !important;*/
    }

    #usrLogin_loginContainer.cadadmin .login-buttons .login-button-wrap.submit {
        background-color: #00B0FF !important;
    }

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.cadadmin #login-widget {
        background-image: url(../../Images/PhoenixLogin/cadadminwidget_ie.jpg);
    }

    #usrLogin_loginContainer.cadadmin {
        background-image: url(../../Images/PhoenixLogin/CAD2021_ie.jpg);
    }

        #usrLogin_loginContainer.cadadmin #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/

/*#region *** Fire CAD Admin ****/
#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border:before,
#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #F23729;
    transition: 0.2s;
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border:after {
    top: auto;
    bottom: 0;
    left: auto;
    right: 0;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border i:before,
#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border i:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 0;
    background-color: #F23729;
    transition: 0.2s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9 ~ .focus-border i:after {
    right: auto;
    left: 0;
    top: auto;
    bottom: 0;
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border:before,
#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border:after {
    width: 100%;
    transition: 0.2s;
    transition-delay: 0.6s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border:after {
    transition-delay: 0.2s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border i:before,
#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border i:after {
    height: 100%;
    transition: 0.2s;
}

#usrLogin_loginContainer.fcadadmin .input-control .effect-9:focus ~ .focus-border i:after {
    transition-delay: 0.4s;
}

#usrLogin_loginContainer.fcadadmin {
    background-image: url("../../Images/PhoenixLogin/Firecadadmin_2024.jpg");
}

    /*Commented By Jebaz For CRM#166381*/
    /*#usrLogin_loginContainer.fcadadmin #login-widget {
        border: 1px solid rgba(242, 55, 41, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
    }*/


    #usrLogin_loginContainer.fcadadmin .login-buttons .login-form-btn[type=submit] {
        /*Added By Jebaz For CRM#167660 */
        margin-right: 46px !important;
        background-color: #2897f191 !important;
        color: #cfcdcd !important;
        /*Commented By Jebaz For CRM#167660 */
        /*background-color: #F23729 !important;*/
    }

    #usrLogin_loginContainer.fcadadmin #login-widget h2 {
        /*Commented By Jebaz For CRM#167660 */
        /*color: #F23729 !important;*/
        /*Added By Jebaz For CRM#167660 */
        color: #D8D8D8;
    }

#usrLogin_loginGoogleAuthottp.fcadadmin .input-control.set-focus {
    -webkit-box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
    box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
}

#usrLogin_loginContainer.fcadadmin .input-control.set-focus .icon-box {
    background-color: #F23729 !important;
}

#usrLogin_loginContainer.fcadadmin .login-buttons .login-button-wrap.submit {
    background-color: #F23729 !important;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    #usrLogin_loginContainer.fcadadmin #login-widget {
        background-image: url(../../Images/PhoenixLogin/firewidget_ie.jpg);
    }

    #usrLogin_loginContainer.fcadadmin {
        background-image: url(../../Images/PhoenixLogin/fireWDA2021_ie.jpg);
    }

        #usrLogin_loginContainer.fcadadmin #login-widget .input100:-ms-input-placeholder {
            color: #999; /* IE11 needs the !important flag */
        }
}
/*#endregion*/




#usrLogin_loginContainer.cad3 {
    background-image: url("../images/Cad2024.jpg");
}

    #usrLogin_loginContainer.cad3 #login-widget .login-header h2 {
        font-size: 28px;
    }

    #usrLogin_loginContainer.cad3 #login-widget {
        border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #00B0FF;
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: #00B0FF;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.cad3 .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.cad3 #login-widget h2 {
        color: #00B0FF !important;
    }

    #usrLogin_loginContainer.cad3 .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
    }

        #usrLogin_loginContainer.cad3 .input-control.set-focus .icon-box {
            background-color: #00B0FF !important;
        }

    #usrLogin_loginContainer.cad3 .login-buttons .login-form-btn[type=submit] {
        background-color: #00B0FF !important;
    }

#usrLogin_loginContainer.wda2police {
    background-image: url("../images/PoliceWda2024.jpg");
}

    #usrLogin_loginContainer.wda2police #login-widget {
        border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #00B0FF;
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: #00B0FF;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.wda2police .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }


    #usrLogin_loginContainer.wda2police #login-widget h2 {
        color: #00B0FF !important;
    }

    #usrLogin_loginContainer.wda2police .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
    }

        #usrLogin_loginContainer.wda2police .input-control.set-focus .icon-box {
            background-color: #00B0FF !important;
        }

    #usrLogin_loginContainer.wda2police .login-buttons .login-form-btn[type=submit] {
        background-color: #00B0FF !important;
    }

#usrLogin_loginContainer.wda2fire {
    background-image: url("../images/FireWda2024.jpg");
}

    #usrLogin_loginContainer.wda2fire #login-widget {
        border: 1px solid rgba(242, 55, 41, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border:before,
    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #F23729;
        transition: 0.2s;
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border i:before,
    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border i:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 2px;
        height: 0;
        background-color: #F23729;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9 ~ .focus-border i:after {
        right: auto;
        left: 0;
        top: auto;
        bottom: 0;
        transition-delay: 0.4s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border:before,
    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.2s;
        transition-delay: 0.6s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border:after {
        transition-delay: 0.2s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border i:before,
    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.2s;
    }

    #usrLogin_loginContainer.wda2fire .input-control .effect-9:focus ~ .focus-border i:after {
        transition-delay: 0.4s;
    }


    #usrLogin_loginContainer.wda2fire #login-widget h2 {
        color: #F23729 !important;
    }

    #usrLogin_loginContainer.wda2fire .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
        box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
    }

        #usrLogin_loginContainer.wda2fire .input-control.set-focus .icon-box {
            background-color: #F23729 !important;
        }

    #usrLogin_loginContainer.wda2fire .login-buttons .login-form-btn[type=submit] {
        background-color: #F23729 !important;
    }

#usrLogin_loginContainer.wda1police {
    background-image: url("../images/Police_WDA_2019.png");
}

    #usrLogin_loginContainer.wda1police #login-widget {
        border: 1px solid rgba(0, 176, 255, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(0, 176, 255, 0.8), 4px 4px 8px black;
    }

        #usrLogin_loginContainer.wda1police #login-widget h2 {
            color: #00B0FF !important;
        }

    #usrLogin_loginContainer.wda1police .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
        box-shadow: 0 0 6px 4px rgba(0, 176, 255, 0.4);
    }

        #usrLogin_loginContainer.wda1police .input-control.set-focus .icon-box {
            background-color: #00B0FF !important;
        }

    #usrLogin_loginContainer.wda1police .login-buttons .login-form-btn[type=submit] {
        background-color: #00B0FF !important;
    }

#usrLogin_loginContainer.wda1fire {
    background-image: url("../images/Fire_WDA_2019.png");
}

    #usrLogin_loginContainer.wda1fire #login-widget {
        border: 1px solid rgba(242, 55, 41, 0.4);
        -webkit-box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
        box-shadow: -4px -4px 8px rgba(242, 55, 41, 0.8), 4px 4px 8px black;
    }

        #usrLogin_loginContainer.wda1fire #login-widget h2 {
            color: #F23729 !important;
        }

    #usrLogin_loginContainer.wda1fire .input-control.set-focus {
        -webkit-box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
        box-shadow: 0 0 6px 4px rgba(242, 55, 41, 0.4);
    }

        #usrLogin_loginContainer.wda1fire .input-control.set-focus .icon-box {
            background-color: #F23729 !important;
        }

    #usrLogin_loginContainer.wda1fire .login-buttons .login-form-btn[type=submit] {
        background-color: #F23729 !important;
    }







/*#region *** Footer ****/
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    background-color: #000000;
}

    footer p {
        position: absolute;
        width: 100%;
        line-height: 24px;
        font-size: 11px;
        color: #828282;
        padding: 0 8px;
        margin: 0;
    }

        footer p:nth-child(2) {
            text-align: center;
        }

        footer p:nth-child(3) {
            text-align: right;
        }
/*#endregion*/

/*#region *** Caps Div ****/
#CapsDiv {
    position: absolute;
    left: 26px;
    top: 40px;
    padding: 0 16px;
    display: none;
    font-size: 15px;
    text-align: left;
    line-height: 48px;
    background: #ffffff;
    border: 1px solid #000;
    color: #222222;
}

    #CapsDiv .arrow {
        width: 20px;
        height: 20px;
        background: #fff;
        border: 1px solid #000;
        border-bottom-color: #fff;
        border-right-color: #fff;
        transform: rotate(45deg);
        position: absolute;
        z-index: 1;
        top: -10px;
        left: 16px;
    }
/*#endregion*/


/*#region *** Popup Window(s) ****/
#popup-container {
    display: none;
    position: fixed;
    z-index: 5;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
}

    #popup-container.show-popup {
        display: block;
    }

    #popup-container .cont-table {
        display: table;
        height: 100%;
        width: 100%;
        max-width: 18rem;
        margin-left: auto;
        margin-right: auto;
    }

    #popup-container.for-warnings .cont-table,
    #popup-container.for-cjis .cont-table,
    #popup-container.product-license .cont-table,
    #popup-container.product-config .cont-table,
    #popup-container.product-nolicense .cont-table {
        max-width: 43rem;
    }

    #popup-container.for-password .cont-table {
        max-width: 40rem;
    }

    #popup-container .cont-cell {
        display: table-cell;
        vertical-align: middle;
    }

    #popup-container .cont-data {
        color: #fff;
        text-align: center;
        padding: 10px 24px;
        border-radius: 8px;
        background-color: #343E4E;
        box-shadow: 0 10px 8px 4px rgba(0,0,0,0.6);
        position: relative;
    }

        #popup-container .cont-data.for-password {
            display: none;
        }

    #popup-container.for-password .cont-data.for-password {
        display: block;
    }

    #popup-container.for-password .cont-data.for-others {
        display: none;
    }

    #popup-container .cont-data i.fa {
        position: absolute;
        margin-left: -36px;
        left: 50%;
        top: -36px;
        width: 72px;
        height: 72px;
        color: white;
        font-size: 32px;
        line-height: 64px;
        border-radius: 50%;
        background-color: #cd0a0a;
    }

    /*#popup-container.for-cjis .cont-data i.fa {
        background-color: #009688;
    }*/

    /*#popup-container .cont-data.new-password i.fa {
        background-color: #009688;
    }*/

    #popup-container.for-failure .cont-data i.fa-exclamation-triangle {
        display: none;
    }

    #popup-container.for-warnings .cont-data i.fa-thumbs-down, #popup-container.for-cjis .cont-data i.fa-thumbs-down {
        display: none;
    }

    #popup-container .cont-data .error-title {
        margin: 40px 0 24px;
        font-size: 26px;
    }

    #popup-container .cont-data p {
        margin: 0;
        max-height: 13rem;
        overflow-y: auto;
    }



    #popup-container.for-password .cont-data.for-password .form-cont {
        text-align: left;
    }

        #popup-container.for-password .cont-data.for-password .form-cont p {
            line-height: 1.8rem;
            max-height: 13rem;
            overflow-y: auto;
        }

    #popup-container.for-password .cont-data.for-password .cont-title {
        font-weight: 600;
        margin: 10px 0;
    }

    #popup-container.for-password .cont-data.for-password .pwd-input-group {
        margin-top: 24px;
    }

        #popup-container.for-password .cont-data.for-password .pwd-input-group .label {
            font-weight: 600;
        }

        #popup-container.for-password .cont-data.for-password .pwd-input-group input {
            border: 1px solid #cccccc;
            width: 246px;
            height: 40px;
            padding-left: 8px;
            padding-right: 8px;
        }

            #popup-container.for-password .cont-data.for-password .pwd-input-group input:focus {
                border: 1px solid #333333;
                background-color: #f3f2f1;
            }

        #popup-container.for-password .cont-data.for-password .pwd-input-group .star {
            display: inline-block;
            width: 20px;
            height: 40px;
            vertical-align: bottom;
            text-align: center;
            font-weight: 700;
            color: red;
        }



    /*********** New Styles for Popup Buttons (2020.12.03) ************
*/
    #popup-container .popup-buttons {
        display: flex;
        margin: 0 auto 20px;
        justify-content: center;
    }

    #popup-container.for-cjis .popup-buttons {
        width: 100%;
    }

    #popup-container .popup-buttons .popup-button-wrap {
        max-width: 170px;
        width: 100%;
        height: 52px;
        border-radius: unset;
        background-color: #1D1D1D;
        -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
        margin-right: 4.5%;
        margin-left: 4.5%;
        cursor: pointer;
        position: relative;
    }

        #popup-container .popup-buttons .popup-button-wrap input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            border-radius: unset;
            background: transparent;
            color: white !important;
            font-size: 13px;
            font-weight: normal;
            letter-spacing: 1px;
            text-transform: uppercase;
            position: relative;
            z-index: 1;
            cursor: pointer;
            font-size: 20px;
            font-family: 'Segoe UI';
        }

        #popup-container .popup-buttons .popup-button-wrap:before {
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: 0;
            left: 0;
            top: 0;
            border-radius: 30px;
            background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.25)), to(rgba(255, 255, 255, 0)));
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 100%);
        }

        #popup-container .popup-buttons .popup-button-wrap.ok {
            background-color: #cd0a0a;
        }

    #popup-container.for-cjis .popup-buttons .popup-button-wrap.ok {
        background-color: #15A500 !important;
    }

    #popup-container .popup-buttons .popup-button-wrap.cancel {
        background-color: #CD0A0A;
    }

.split {
    height: 2px;
    border-top: 1px solid #707070;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 24px;
}


@media (max-width: 768px) {
    #popup-container.for-password .cont-data.for-password {
        max-height: 100vh;
        overflow-y: auto;
    }

        #popup-container.for-password .cont-data.for-password .error-title {
            margin-top: 24px;
            margin-bottom: 24px;
        }

        #popup-container.for-password .cont-data.for-password i.fa {
            position: static;
            margin: 0;
            box-shadow: 0 2px 2px 1px rgba(0,0,0,0.2);
        }

        #popup-container.for-password .cont-data.for-password .cont-title {
            margin-bottom: 16px;
        }
}

#popup-container.for-password .cont-data.for-password .popup-buttons .popup-button-wrap input:focus {
    -webkit-box-shadow: 0 1px 2px 2px rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px 2px rgba(255, 255, 255, 0.2);
}


/****** CJIS check *****
*/
#popup-container.for-cjis .cont-data #cjis-checkbox .checkbox-label {
    margin-top: 32px;
}

#popup-container .cont-data #cjis-checkbox, #popup-container .cont-data #cjis-checkbox .additional-text {
    display: none;
}

#popup-container.for-cjis .cont-data #cjis-checkbox {
    display: block;
    margin-bottom: 24px;
}

#popup-container.for-cjis .Loginpopup .popup-buttons .popup-button-wrap input:focus {
    -webkit-box-shadow: 0 1px 2px 2px rgba(255, 255, 255, 0.2);
    box-shadow: 0 1px 2px 2px rgba(255, 255, 255, 0.2);
}
/*#endregion*/


select {
    background: rgba(1,1,2,3.3);
    color: #fff;
}

#TFAuth {
    display: none;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.tfcls {
    display: none;
    z-index: 11111;
    width: 100vw;
    height: 100vh;
    /* background-color: #000000; */
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(35 35 35 / 80%);
}

.close {
    color: #ffffff;
    float: right;
    cursor: pointer;
    margin-top: 15px;
    width: 20px;
}
/*#TwoFactor Authentication*/

/*#TFAuth body {
    font-family: Arial, sans-serif;
    background-size: cover;
    height: 100vh;
}*/

/*#popupcontainer1 {
    display: none;
    position: fixed;
    z-index: 2;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
}*/
#TFAuth h1 {
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    color: #06D85F;
    margin: 80px 0;
}

#TFAuth .box {
    width: 40%;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;
}

.activecolor {
    background-color: brown !important;
}

.inactivecolor {
    background-color: aliceblue
}

#TFAuth .button {
    font-size: 1em;
    padding: 10px;
    color: #FFF;
    border: 2px solid;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    background: #777777;
    width: 100% !important;
}

#TFAuth .verify_btn {
    background: #204059;
}

    #TFAuth .verify_btn:hover {
        /*background: #777777;*/
    }

#TFAuth .button:hover {
    /*background: #204059;*/
}

#TFAuth .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #777777;
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

    #TFAuth .overlay:target {
        visibility: visible;
        opacity: 1;
    }

#TFAuth .popup {
    margin: 200px auto;
    /*padding: 20px;*/
    background: #fff;
    border-radius: 5px;
    width: 400px;
    position: relative;
    transition: all 5s ease-in-out;
}

    #TFAuth .popup h2 {
        margin-top: 0;
        /*color: #333;*/
        font-family: Tahoma, Arial, sans-serif;
    }

    #TFAuth .popup .close {
        position: absolute;
        right: 5px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }

        #TFAuth .popup .close:hover {
            color: #204059;
        }

    #TFAuth .popup .content {
        max-height: 30%;
        overflow: auto;
    }

@media screen and (max-width: 700px) {
    .box {
        width: 70%;
    }

    .popup {
        width: 70%;
    }
}

#TFAuth .modal-header {
    padding: 0px 14px 0 16px;
    background-color: #ab5656;
    color: white;
    width: 565px;
    position: absolute;
    height: 18%;
}

.tf_header_text {
    font-weight: 500;
    margin-top: 12px;
}

#TFAuth .modal-body p {
    font-weight: 500;
}

#TFAuth .modal-body {
    padding: 61px 16px 13px 0px;
    background-color: #5d5d5d;
    color: white;
    width: 565px;
    text-align: center;
}

#TFAuth .rcorners2 {
    border-radius: 5px !important;
    border: 2px solid white;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 40px !important;
}

/* Styles for Yubikey Setup */

#Divyubikeysetup {
    display: none;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

tfclsyubikeySetup {
    display: none;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    /* background-color: #000000; */
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(35 35 35 / 80%);
}


#Divyubikeysetup h1 {
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    color: #06D85F;
    margin: 80px 0;
}

#Divyubikeysetup .box {
    width: 40%;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;
}

#Divyubikeysetup .button {
    font-size: 1em;
    padding: 10px;
    color: #FFF;
    border: 2px solid;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    background: #777777;
    width: 100% !important;
}

#Divyubikeysetup .verify_btn {
    background: #204059;
}

    #Divyubikeysetup .verify_btn:hover {
        background: #777777;
    }

#Divyubikeysetup .button:hover {
    background: #204059;
}

#Divyubikeysetup .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #777777;
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

    #Divyubikeysetup .overlay:target {
        visibility: visible;
        opacity: 1;
    }

#Divyubikeysetup .popup {
    margin: 200px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 400px;
    position: relative;
    transition: all 5s ease-in-out;
}

    #Divyubikeysetup .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
    }

    #Divyubikeysetup .popup .close {
        position: absolute;
        right: 5px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }

        #Divyubikeysetup .popup .close:hover {
            color: #204059;
        }

    #Divyubikeysetup .popup .content {
        max-height: 30%;
        overflow: auto;
    }

#Divyubikeysetup .modal-header {
    padding: 0px 14px 0 16px;
    background-color: #ab5656;
    color: white;
    width: 565px;
    position: absolute;
    height: 18%;
}

#Divyubikeysetup .modal-body p {
    font-weight: 500;
}

#Divyubikeysetup .modal-body {
    padding: 61px 16px 13px 0px;
    background-color: #5d5d5d;
    color: white;
    width: 436px;
    text-align: center;
}

/* Styles for Yubikey Register */

#DivYubikeyRegister {
    display: none;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.tfclsyubikeyRegister {
    display: none;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    /* background-color: #000000; */
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(35 35 35 / 80%);
}


#DivYubikeyRegister h1 {
    text-align: center;
    font-family: Tahoma, Arial, sans-serif;
    color: #06D85F;
    margin: 80px 0;
}

#DivYubikeyRegister .box {
    width: 40%;
    margin: 0 auto;
    background: rgba(255,255,255,0.2);
    padding: 35px;
    border: 2px solid #fff;
    border-radius: 20px/50px;
    background-clip: padding-box;
    text-align: center;
}

#DivYubikeyRegister .button {
    font-size: 1em;
    padding: 10px;
    color: #FFF;
    border: 2px solid;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    background: #777777;
    width: 100% !important;
}

#DivYubikeyRegister .verify_btn {
    background: #204059;
}

    #DivYubikeyRegister .verify_btn:hover {
        background: #777777;
    }

#DivYubikeyRegister .button:hover {
    background: #204059;
}

#DivYubikeyRegister .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #777777;
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

    #DivYubikeyRegister .overlay:target {
        visibility: visible;
        opacity: 1;
    }

#DivYubikeyRegister .popup {
    margin: 200px auto;
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 400px;
    position: relative;
    transition: all 5s ease-in-out;
}

    #DivYubikeyRegister .popup h2 {
        margin-top: 0;
        color: #333;
        font-family: Tahoma, Arial, sans-serif;
    }

    #DivYubikeyRegister .popup .close {
        position: absolute;
        right: 5px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }

        #DivYubikeyRegister .popup .close:hover {
            color: #204059;
        }

    #DivYubikeyRegister .popup .content {
        max-height: 30%;
        overflow: auto;
    }

#DivYubikeyRegister .modal-header {
    padding: 0px 14px 0 16px;
    background-color: #ab5656;
    color: white;
    width: 565px;
    position: absolute;
    height: 18%;
}

#DivYubikeyRegister .modal-body p {
    font-weight: 500;
}

#DivYubikeyRegister .modal-body {
    padding: 61px 16px 13px 0px;
    background-color: #5d5d5d;
    color: white;
    width: 436px;
    text-align: center;
}

/* Styles for Yubikey Login */

#DivYubikeyLogin {
    display: none;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

    #DivYubikeyLogin h1 {
        text-align: center;
        font-family: Tahoma, Arial, sans-serif;
        color: #06D85F;
        margin: 80px 0;
    }

    #DivYubikeyLogin .box {
        width: 40%;
        margin: 0 auto;
        background: rgba(255,255,255,0.2);
        padding: 35px;
        border: 2px solid #fff;
        border-radius: 20px/50px;
        background-clip: padding-box;
        text-align: center;
    }

    #DivYubikeyLogin .button {
        font-size: 1em;
        padding: 10px;
        color: #FFF;
        border: 2px solid;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.3s ease-out;
        background: #777777;
        width: 100% !important;
    }

.tfclsyubikeyLogin {
    display: none;
    z-index: 2;
    width: 100vw;
    height: 100vh;
    /* background-color: #000000; */
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgb(35 35 35 / 80%);
}

#DivYubikeyLogin .overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #777777;
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
}

    #DivYubikeyLogin .overlay:target {
        visibility: visible;
        opacity: 1;
    }

#DivYubikeyLogin .popup {
    margin: 200px auto;
    background: #fff;
    border-radius: 5px;
    width: 400px;
    position: relative;
    transition: all 5s ease-in-out;
}

    #DivYubikeyLogin .popup h2 {
        margin-top: 0;
        font-family: Tahoma, Arial, sans-serif;
    }

    #DivYubikeyLogin .popup .close {
        position: absolute;
        right: 5px;
        transition: all 200ms;
        font-size: 30px;
        font-weight: bold;
        text-decoration: none;
    }

        #DivYubikeyLogin .popup .close:hover {
            color: #204059;
        }

    #DivYubikeyLogin .popup .content {
        max-height: 30%;
        overflow: auto;
    }

#DivYubikeyLogin .modal-header {
    padding: 0px 14px 0 16px;
    background-color: #ab5656;
    color: white;
    width: 565px;
    position: absolute;
    height: 18%;
}

#DivYubikeyLogin .modal-body p {
    font-weight: 500;
}

#DivYubikeyLogin .modal-body {
    padding: 61px 16px 13px 0px;
    background-color: #5d5d5d;
    color: white;
    width: 565px;
    text-align: center;
}



/* Style for autofill input */
input:-webkit-autofill,
input:-webkit-autofill:focus {
    transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s;
    background-color: #000 !important; /* Set background color to black */
    color: #B2B2B2 !important; /* Set text color to the specified grey color */
    font-family: 'Segoe UI', sans-serif !important; /* Set the font family */
    font-weight: normal !important; /* Set the font weight to normal */
    font-size: 24px !important; /* Set the font size to 20px */
}

/* Style for autocompleted input */
/* Apply styles to autocompleted inputs */
input[data-autocompleted],
input[data-autocompleted]:focus {
    background-color: transparent !important;
    font-size: 20px !important;
    color: #B2B2B2 !important; /* Set text color to the specified grey color */
    font-family: 'Segoe UI', sans-serif !important; /* Set the font family */
    font-weight: normal !important; /* Set the font weight to normal */
}

    /* Additional style to ensure the color is the specified grey color */
    /* Apply grey text color to autofill inputs that are not focused */
    input[data-autocompleted]:not(:focus) {
        color: #B2B2B2 !important;
    }


/* Additional style to ensure the color is the specified grey color */
input:not(:focus) {
    color: #B2B2B2;
}

/*Added By Jebaz For CRM#166381*/
.accordion-item {
    /*border: 1px solid #ccc;*/
    margin-bottom: 8px;
    border-radius: 12px;
    grid-template-columns: 38px 1fr 18px;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .032));
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

img#Pnxlogo {
    width: min(100%, 408px);
    height: auto;
    display: block;
    margin: 0 auto;
    user-select: none;
    -webkit-user-drag: none;
}
/*Added By Jebaz For CRM#166381*/
/* Glassmorphism Accordion Header */
.accordion-header {
    padding: 4px 16px;
    cursor: pointer;
    color: #E8E8E8;
    font-family: 'Segoe UI';
    font-size: 15px;
    width: 572px;
    display: flex;
    align-items: center;
    gap: 16px;
    word-wrap: break-word;
    /* Glassmorphism effect */
    transition: all 0.3s ease;
}

    /*.accordion-header:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 6px 20px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}*/

    .accordion-header.active {
        background: rgba(40, 151, 241, 0.15);
        border-color: rgba(40, 151, 241, 0.3);
    }

/*Added By Jebaz For CRM#166381*/
/* Glassmorphism Accordion Content */
.accordion-content {
    margin-left: 20px;
    margin-top: 4px;
    display: none;
    color: #A8B8C8;
    word-wrap: break-word;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 16px;
    max-width: 660px;
    line-height: 1.6;
    /* Glassmorphism effect for content */
    -webkit-backdrop-filter: blur(8px);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-bottom: 8px;
}
/*Added By Jebaz For CRM#166381*/
.feature-name {
    --scroll-thumb: rgba(200, 200, 200, 0.15);
    --scroll-thumb-hover: rgba(200, 200, 200, 0.35);
    --scroll-thumb-active: rgba(200, 200, 200, 0.5);
    --scroll-track: rgba(44, 53, 69, 0.3);
    --scroll-edge: rgba(44, 53, 69, 0.6);
    transition: max-height 0.3s ease;
    max-width: 700px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    max-height: 82px;
    overflow-y: auto;
    padding-right: 5px;
    scrollbar-width: thin;
    -ms-overflow-style: none;
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    line-height: 1.4;
}

    .feature-name::-webkit-scrollbar {
        display: none;
    }

/*Added By Jebaz For CRM#166381*/
.rmsfeature {
    color: #ffffff;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 16px;
}

/*Added By Jebaz For CRM#166381*/
.viewrmsfeature {
    color: #ffffff;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 16px;
    position: relative;
    top: -2px;
}
/*Added By Jebaz For CRM#166381*/
#usrwhatsnewcontent h2 {
    font-family: 'Segoe UI';
    /* font-weight: 900; */
    font-size: 23px;
    color: rgba(255,255,255,.96);
    margin-bottom: 0;
    margin-top: 0;
    letter-spacing: .22em;
    white-space: nowrap;
    text-transform: uppercase;
}

/*Added By Jebaz For CRM#166381*/
#usrwhatsnewcontent p {
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 14px;
    color: rgba(232,244,255,.76);
    margin-top: 7px;
}

/*Added By Jebaz For CRM#166381*/
/* Glassmorphism What's New Header */
#usrwhatsnewheader {
    color: #F0F0F0;
    font-family: 'Segoe UI';
    font-size: 34px;
    line-height: 1.02 !important;
    margin-bottom: 11px;
    /* Glassmorphism effect */
    -webkit-backdrop-filter: blur(16px);
    font-weight: bold;
}

/* Glassmorphism What's New Content Section */
#usrwhatsnewcontent {
    padding: 0px 4px 14px 16px;
    /* Glassmorphism effect */
    background: rgba(255, 255, 255, 0.04);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(74, 174, 255, .50);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    margin-top: 10px;
    width: 550px;
    min-height: 650px;
    height: 70vh;
    /* Flex column so tblview and quote sit naturally at the bottom */
    display: flex;
    flex-direction: column;
}

    #usrwhatsnewcontent h2 {
        color: #ffffff;
        /* text-shadow: 0 2px 8px rgba(0,0,0,.30); */
    }

    /* Accordion inside content panel fills available space, pushing quote+tblview down */
    #usrwhatsnewcontent > #usrWhatsNew_accordion {
        flex: 1 1 auto;
    }

/* Hide What's New + View RMS features row — bottom of the panel */
#tblview {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 6px;
    margin-top: 10px;
    border-top: 1px solid rgba(74, 174, 255, .20);
    position: relative;
    right: 0;
    box-sizing: border-box;
}

/*Added By Jebaz For CRM#166381*/
#usrwhatsnewcookie {
    position: relative;
    left: 18px;
    /* Hidden by default — shown only when What's New is collapsed (JS calls .show()) */
    display: none;
    border: none !important;
    outline: none !important;
}

    /* Remove any table border artifacts inside the cookie section */
    #usrwhatsnewcookie table,
    #usrwhatsnewcookie td,
    #usrwhatsnewcookie tr {
        border: none !important;
        border-collapse: collapse;
        outline: none !important;
        margin-top: 3px;
    }

label.rmsfeature {
    position: relative;
    top: -3px;
}

.era-title .blue {
    color: #29a8ff;
}

.era-title .orange {
    color: #ff9f1c;
}

.era-kicker {
    color: #29a8ff;
    font-weight: 900;
    font-size: 12px !important;
    letter-spacing: .34em;
    text-transform: uppercase;
    line-height: 1;
    filter: drop-shadow(0 0 12px rgba(41, 168, 255, .22));
}
/*Added By Jebaz For CRM#166381*/
#cookieheader {
    text-align: center;
    font-family: 'Segoe UI';
    font-weight: bold;
    font-size: 32px;
    color: #D8D8D8;
}

/*Added By Jebaz For CRM#166381*/
/*#usrWhatsNew_accordion {
    max-height: 465px;
    overflow-y: auto;*/ /* Enable vertical scrollbar only if content exceeds max-height */
/*height: auto;*/ /* Allow the height to adjust dynamically based on content */
/*width: 703px;*/
/* Firefox */
/*scrollbar-width: auto;*/
/*scrollbar-color: #66666675 #2c3545b8;*/ /* thumb color | track color */
/*scrollbar-color: rgba(200, 200, 200, 0.2) rgba(44, 53, 69, 0.4);
    padding-left: 2px;
}*/

#usrWhatsNew_accordionCustom {
    max-height: 86px;
    overflow-y: hidden;
    height: auto;
    width: 550px;
    border-radius: 15px;
    border: 1px solid rgba(74, 174, 255, .40);
    background: radial-gradient(circle at 7% 50%, rgba(255, 157, 36, .12), transparent 24%), linear-gradient(90deg, rgba(7, 24, 48, var(--info-opacity)), rgba(7, 17, 36, .20));
    backdrop-filter: blur(7px) saturate(1.05);
    -webkit-backdrop-filter: blur(11px);
    box-shadow: 0 22px 74px rgba(0, 0, 0, .36), inset 0 1px 0 rgba(255, 255, 255, .08);
    -ms-overflow-style: none;
    height: 64px;
}


    #usrWhatsNew_accordionCustom::-webkit-scrollbar {
        display: none; /* Hide the webkit scrollbar */
    }

/*Added By Jebaz For CRM#166381*/
/*#usrWhatsNew_accordion::-webkit-scrollbar {
    display: none;*/ /* Hide the webkit scrollbar */
/*}*/

/*Added By Jebaz For CRM#166381*/
.UsrLoginLabelUserName {
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 20px;
    color: #f9f8f8;
    padding-right: 300px;
}

/*Added By Jebaz For CRM#166381*/
.UsrLoginLabelPassword {
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 20px;
    color: #f9f8f8;
    padding-right: 314px;
}

/*Added By Jebaz For CRM#166381*/
.UsrLoginLabeldatabase {
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 20px;
    color: #f9f8f8;
    padding-right: 256px;
}

/*Added By Jebaz For CRM#166381*/
#loginsigin {
    font-family: 'Segoe UI';
    font-size: 40px;
    color: #D8D8D8;
    text-align: initial;
    margin-bottom: 24px;
    font-weight: 600;
}

/*Added By Jebaz For CRM#166381*/
.login-input.name:focus {
    border: 2px solid #3498db; /* Border color on focus */
    background-color: #ecf0f1; /* Background color on focus */
    color: #2c3e50; /* Text color on focus */
}

/*Added By Jebaz For CRM#166381*/
.footer-section {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 0 8px;
    -webkit-backdrop-filter: blur(6px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Footer info container - centered text layout */
.footer-info {
    text-align: center;
}

    .footer-info .footertext {
        margin: 0;
        line-height: 1.4;
    }

.footer-section .settings-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

    .footer-section .settings-icon:hover {
        opacity: 1;
    }

    .footer-section .settings-icon .icon {
        width: 34px;
        height: 35px;
        fill: rgba(232, 239, 251, .83);
        margin-bottom: 11px;
        position: absolute;
        margin-left: 42px;
        display: none;
    }

/*Added By Jebaz For CRM#166381*/
.footertext {
    margin: 0;
    font-family: 'Segoe UI';
    color: rgb(163, 177, 198);
    text-align: center;
    font-size: 16px;
    letter-spacing: 0px;
    line-height: 27px;
}

.smsize {
    font-size: 16px;
}
/*Added By Jebaz For CRM#166381*/
#hideWhatsNewCheckbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #899FAD;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    background-color: transparent;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
}

/*Added By Jebaz For CRM#166381*/
#showWhatsNewCheckbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #899FAD;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    background-color: transparent;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 14px;
    cursor: pointer;
}

#usrLogin_loginContainer.cms #login-widget .header-wrap img {
    content: url('../../images/phoenixlogin/ProPhoenixLogo_2024R_New.png');
    width: 402px;
}

#usrLogin_loginContainer.cadadmin #login-widget .header-wrap img {
    content: url('../../images/phoenixlogin/prophoenix_logofcfic.png');
    width: 402px;
}

#usrLogin_loginContainer.fcadadmin #login-widget .header-wrap img {
    content: url('../../images/phoenixlogin/prophoenix_logofcfic.png');
    width: 402px;
}

#usrLogin_loginContainer.fire #login-widget .header-wrap img {
    content: url('../../images/phoenixlogin/ProPhoenixLogo_2024R_New.png');
    width: 402px;
}

@media screen and (min-width: 1601px) and (max-width: 1800px) {
    /*#usrLogin_loginContainer.law {
        background-image: url('../../images/phoenixlogin/Law_Double_Bg.jpg') !important;
    }*/

    /*#usrLogin_loginContainer.cms #usrwhatsnew {
        background: #fff !important;
    }*/
    #Pnxlogo {
        height: 130px !important;
    }

    #usrwhatsnew {
        /*position: unset !important;*/
        margin-right: unset !important;
        /*top: unset !important;*/
        right: 280px !important;
        padding-right: unset !important;
        /*margin-top: unset !important;*/
        padding-right: 44px !important;
        padding-left: 53px !important;
        background: none !important;
    }

    #usrLogin_loginContainer {
        overflow: unset !important;
        height: unset !important;
        min-height: -webkit-fill-available;
    }

        #usrLogin_loginContainer #login-widget {
            /*padding-top: unset !important;*/
            /*position: unset !important;*/
            /*right: unset !important;*/
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            margin: 0px !important;
            background-position: center center !important;
        }

    #loginsigin {
        margin-bottom: 12px !important;
        font-size: 35px !important;
    }

    #usrLogin_upForgotPwd {
        padding-top: 8px !important;
    }

    #login-widget {
        line-height: 1.28 !important;
    }

    #usrLogin_loginContainer #login-widget .login-header h2, #usrLogin_loginContainer #login-widget .login-header h3 {
        font-size: 38px !important;
    }

    #usrLogin_loginContainer #login-widget .login-header h2 {
        margin-top: 0px !important;
    }

    #usrLogin_loginContainer #login-widget .input-control {
        margin-bottom: 3px !important;
    }
}

@media screen and (min-width: 1500px) and (max-width: 1600px) {
    /*  #usrLogin_loginContainer.law {
        background-image: url('../../images/phoenixlogin/Law_Double_Bg.jpg') !important;
    }*/
    /*#usrLogin_loginContainer.cms #usrwhatsnew {
        background: #fff !important;
    }*/
    /*    #Pnxlogo {
        height: 111px !important;
    }*/

    #usrwhatsnew {
        position: absolute !important;
        top: -17px !important;
        margin-right: -100px !important;
        /*top: unset !important;*/
        right: 240px !important;
        padding-right: unset !important;
        margin-top: 35px !important;
        /*padding-right: 44px !important;*/
        padding-left: 53px !important;
        background: none !important;
    }

    #usrwhatsnewcontent {
        min-height: 414px !important;
        height: 61vh !important;
    }

    .footer-section {
        top: 85vh !important;
    }

    #usrWhatsNew_accordion {
        max-height: 330px !important;
    }

    .footertext {
        position: relative;
        bottom: 24px !important;
    }

    #usrWhatsNew_accordionCustom { /*Added by subashini for CRM#186399*/
        max-height: 100px !important;
    }

    .accordion-content {
        font-size: 17px !important;
    }

    .feature-name {
        font-size: 18px !important;
    }

    #usrLogin_loginContainer {
        overflow: hidden !important;
        height: unset !important;
        min-height: -webkit-fill-available;
    }

        #usrLogin_loginContainer #login-widget {
            /*padding-top: unset !important;*/
            /*position: unset !important;*/
            /*right: unset !important;*/
            display: block;
            padding-top: 20px !important;
            margin: 0px !important;
            background-position: center center !important;
        }

            #usrLogin_loginContainer #login-widget .input-control {
                margin-bottom: 12px !important;
            }

    #loginsigin {
        font-size: 33px !important;
        margin: 15px 0px 0px 0px !important;
    }

    #usrLogin_loginContainer #login-widget .login-header h2 {
        margin-top: 4px !important;
        font-size: 43px;
    }

    #usrLogin_loginContainer #login-widget .login-header h3 {
        font-size: 40px !important;
    }

    #usrLogin_loginContainer #login-widget .input-control .login-input {
        padding: 10px !important;
    }

    #usrwhatsnewheader {
        /*        font-size: 38px !important;*/
        line-height: 1.25 !important;
    }

    #usrwhatsnewcontent h2 {
        margin-top: 15px !important;
        font-size: 30px !important;
    }

    .accordion-header {
        font-size: 18px;
        padding: 2px !important;
    }

    #tblview {
        padding-top: 18px !important;
    }

    #usrLogin_upForgotPwd {
        font-size: 22px !important;
    }

    .header-wrap {
        line-height: 1 !important;
    }

        .header-wrap img {
            width: min(92%, 388px) !important;
        }

    #usrLogin_loginContainer #login-widget .login-buttons {
        margin-top: 17px !important;
    }

    #usrwhatsnewcookie {
        position: relative !important;
        bottom: auto !important;
        margin-top: 0px !important;
    }
    /* ══════════════════════════════════════════════════════════════════
       FIX: Hide What's New state at 1500–1600px (125% zoom on 1920px)
       When JS sets position:unset/right:unset, center the login form
       ══════════════════════════════════════════════════════════════════ */
    #usrLogin_loginContainer #login-widget[style*="unset"] {
        /* Center the login widget */
        width: min(100vw, 430px) !important;
        margin: 0 auto !important;
        right: auto !important;
        left: auto !important;
        /* Restore flex layout */
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        text-align: center !important;
        /* Consistent padding */
    }

        /* Footer centered when What's New is hidden */
        #usrLogin_loginContainer #login-widget[style*="unset"] ~ .footer-section,
        #login-widget[style*="unset"] .footer-section {
            left: 0 !important;
            right: 0 !important;
            justify-content: center !important;
            text-align: center !important;
        }

        /* usrwhatsnewcookie proper positioning when visible */
        #usrLogin_loginContainer #login-widget[style*="unset"] #usrwhatsnewcookie,
        #login-widget[style*="unset"] #usrwhatsnewcookie {
            position: relative !important;
            display: block !important;
            width: 100% !important;
            text-align: center !important;
            left: auto !important;
            bottom: auto !important;
        }

        /* Consistent input control widths */
        #usrLogin_loginContainer #login-widget[style*="unset"] .input-control {
            width: 100% !important;
            margin-bottom: 2px !important;
        }

        /* Buttons row centered */
        #usrLogin_loginContainer #login-widget[style*="unset"] .login-buttons {
            display: flex !important;
            gap: 16px !important;
            width: 100% !important;
            margin-top: 8px !important;
        }

            /* Equal button sizing */
            #usrLogin_loginContainer #login-widget[style*="unset"] .login-buttons .login-form-btn {
                min-width: 120px !important;
                flex: 0 0 auto !important;
            }

        /* Forgot Password centered */
        #usrLogin_loginContainer #login-widget[style*="unset"] #usrLogin_upForgotPwd {
            text-align: center !important;
            width: 100% !important;
            padding-top: 0px !important;
        }
}

@media screen and (min-width: 1300px) and (max-width: 1499px) {
    /*  #usrLogin_loginContainer.law {
        background-image: url('../../images/phoenixlogin/Law_Double_Bg.jpg') !important;
    }*/
    /*#usrLogin_loginContainer.cms #usrwhatsnew {
        background: #fff !important;
    }*/
    .accordion-header img {
        width: 24px !important;
    }

    .accordion-content {
        font-size: 14px !important;
    }

    #usrwhatsnew {
        /*position: unset !important;*/
        margin-right: unset !important;
        top: 8px !important;
        right: 136px !important;
        padding-right: unset !important;
        margin-top: 35px !important;
        /*padding-right: 44px !important;*/
        padding-left: 53px !important;
        background: none !important;
    }

    #usrLogin_loginContainer.law ~ #usrwhatsnew,
    .law #usrwhatsnew {
        right: 400px !important;
        margin-top: 49px !important;
    }

    #usrWhatsNew_accordion {
        max-height: 377px !important;
    }

    #usrLogin_loginContainer {
        overflow: unset !important;
        /*height: unset !important;*/
        min-height: -webkit-fill-available;
    }

    #usrwhatsnewcontent {
        min-height: unset !important;
        height: unset !important;
    }

    #usrLogin_loginContainer #login-widget {
        /*padding-top: unset !important;*/
        /*position: unset !important;*/
        /*right: unset !important;*/
        width: 28% !important;
        /*position: relative;*/
        right: 447px !important;
        display: block;
        padding-top: 0px !important;
        margin: 0px !important;
        height: -webkit-fill-available;
        background-position: center center !important;
    }

        #usrLogin_loginContainer #login-widget .input-control {
            margin-bottom: 12px !important;
        }

    #loginsigin {
        /*        font-size: 31px !important;*/
        margin: 15px 0px 10px 0px !important;
    }

    #usrLogin_loginContainer #login-widget .login-header h2 {
        margin-top: 4px !important;
    }

    #usrLogin_loginContainer #login-widget .login-header h2, #usrLogin_loginContainer #login-widget .login-header h3 {
        /*        font-size: 26px !important;*/
        margin: 0px 0px 10px 0px !important;
    }

    #usrLogin_loginContainer #login-widget .input-control .login-input {
        font-size: 24px !important;
    }

    #usrwhatsnewheader {
        font-size: 32px !important;
        line-height: 1.25 !important;
    }

    #usrwhatsnewcontent h2 {
        margin-top: 10px !important;
        font-size: 30px !important;
    }

    .accordion-header {
        font-size: 16px;
    }

    .accordion-item {
        margin-bottom: 8px !important;
    }

        .accordion-item.wn-feature-card {
            margin-bottom: 8px !important;
        }

            .accordion-item.wn-feature-card .accordion-header {
                padding: 7px 6px !important;
                gap: 12px !important;
            }

    #usrLogin_upForgotPwd {
        font-size: 22px !important;
        padding-top: 12px !important;
    }

    .header-wrap {
        line-height: 1 !important;
    }

    /* #web{
        margin-top:65px !important;
    }*/
    #usrLogin_loginContainer #login-widget .login-buttons {
        margin-top: 16px !important;
    }

    #usrwhatsnewcontent p {
        margin-bottom: 8px !important;
    }

    #usrLogin_databse {
        padding-right: 186px !important;
    }

    .UsrLoginLabelUserName {
        padding-right: 277px !important;
    }

    .UsrLoginLabeldatabase {
        padding-right: 235px !important;
    }

    #usrLogin_lblJuris {
        padding-right: 220px !important;
    }

    .UsrLoginLabelPassword {
        padding-right: 303px !important;
    }

    .footertext {
        font-size: 13px !important;
        bottom: 44px !important;
    }

    #lblRMSfeatures {
        padding-left: 20px !important;
    }
}
/* ============================================================
   LAPTOP  1024 – 1299px
   Login widget left (natural flow), What's New absolute right.
   Matches target screenshot exactly.
   ============================================================ */
@media screen and (min-width: 1024px) and (max-width: 1299px) {

    body {
        overflow: hidden !important;
        height: 100vh !important;
    }

    #usrLogin_loginContainer {
        display: block !important;
        position: relative !important;
        overflow: hidden !important;
        height: 100vh !important;
        min-height: 100vh !important;
        padding: 0 !important;
    }

        /* Login widget — left side, vertically centred, NO scrollbar */
        #usrLogin_loginContainer #login-widget {
            position: relative !important;
            right: auto !important;
            left: auto !important;
            float: none !important;
            width: clamp(300px, 46vw, 480px) !important;
            max-width: 480px !important;
            min-height: 100vh !important;
            height: 100vh !important;
            margin: 0 !important;
            padding: clamp(16px, 3vw, 36px) clamp(14px, 2vw, 26px) 50px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: flex-start !important;
            justify-content: center !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            overflow: hidden !important;
            box-sizing: border-box !important;
        }

            #usrLogin_loginContainer #login-widget .header-wrap {
                display: flex !important;
                flex-direction: column !important;
                align-items: flex-start !important;
                width: 100% !important;
            }

            #usrLogin_loginContainer #login-widget .login-header {
                text-align: left !important;
                width: 100% !important;
            }

                #usrLogin_loginContainer #login-widget .login-header h2 {
                    text-align: center !important;
                }

                #usrLogin_loginContainer #login-widget .login-header h3 {
                    text-align: center !important;
                }

            #usrLogin_loginContainer #login-widget .login-control-group {
                width: 100% !important;
                margin-top: 0 !important;
            }

            #usrLogin_loginContainer #login-widget .input-control {
                width: 100% !important;
                margin-bottom: 12px !important;
            }

                #usrLogin_loginContainer #login-widget .input-control .login-input {
                    font-size: 24px !important;
                    padding: 12px 16px !important;
                    width: 100% !important;
                }

            #usrLogin_loginContainer #login-widget .select-options,
            #usrLogin_loginContainer #login-widget .select-options .lstProductDB {
                width: 100% !important;
            }

            #usrLogin_loginContainer #login-widget .login-buttons {
                width: 100% !important;
                margin-top: 8px !important;
               /* display: grid !important;*/
                grid-template-columns: minmax(0, 1fr) minmax(100px, .52fr) !important;
                gap: 12px !important;
            }

                #usrLogin_loginContainer #login-widget .login-buttons .login-combo {
                    display: grid !important;
                    grid-template-columns: minmax(0, 1fr) !important;
                }

                    #usrLogin_loginContainer #login-widget .login-buttons .login-combo .login-form-btn {
                        font-size: 20px !important;
                        font-weight: 800 !important;
                        letter-spacing: 1px !important;
                    }

                #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset {
                    font-size: 20px !important;
                    font-weight: 800 !important;
                    letter-spacing: 1px !important;
                    width: 100% !important;
                }

    #forgethide, #usrLogin_upForgotPwd {
        width: 100% !important;
        text-align: center !important;
        /*        font-size: 13px !important;*/
        padding-top: 10px !important;
        right: auto !important;
        position: relative !important;
    }

    #loginsigin {
        /*        font-size: 22px !important;*/
        margin: 6px 0 4px !important;
        text-align: left !important;
    }

    .UsrLoginLabelUserName, .UsrLoginLabelPassword, .UsrLoginLabeldatabase {
        padding-right: 0 !important;
        /*        font-size: 12px !important;*/
        display: flex;
    }

    /* What's New — absolute right panel, content from top, NO page scroll */
    #usrwhatsnew {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        left: clamp(300px, 46vw, 480px) !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: clamp(16px, 3vw, 36px) clamp(14px, 2vw, 26px) 50px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        background: unset !important;
    }

    /* Cancel base .law absolute right: value */
    #usrLogin_loginContainer.law ~ #usrwhatsnew,
    .law #usrwhatsnew {
        position: absolute !important;
        right: 0 !important;
        left: clamp(300px, 46vw, 480px) !important;
        top: 0 !important;
        bottom: 0 !important;
        margin-top: 0 !important;
        width: auto !important;
    }

    #usrWhatsNew_accordionCustom {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    /* Override base min-height:557px width:508px — internal scroll for accordion */
    #usrwhatsnewcontent {
        width: 100% !important;
        min-height: unset !important;
        height: auto !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 360px !important;
    }

    /* Accordion — internal scrollbar so all items are accessible */
    #usrWhatsNew_accordion {
        max-height: clamp(220px, 40vh, 380px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

        /* Thin scrollbar — visible but subtle */
        #usrWhatsNew_accordion::-webkit-scrollbar {
            width: 4px;
        }

        #usrWhatsNew_accordion::-webkit-scrollbar-track {
            background: rgba(255,255,255,0.06);
            border-radius: 4px;
        }

        #usrWhatsNew_accordion::-webkit-scrollbar-thumb {
            background: rgba(255,255,255,0.28);
            border-radius: 4px;
        }

    /* Era header — sits at very top of right panel, aligned with logo on left */
    #usrwhatsnewheader {
        font-size: clamp(18px, 2vw, 24px) !important;
        margin-top: 0 !important;
        margin-bottom: 12px !important;
        padding-top: 0 !important;
        line-height: 1.2 !important;
    }

    .era-kicker {
        font-size: 12px !important;
        letter-spacing: .3em !important;
        margin-bottom: 4px !important;
    }

    .era-title {
        font-size: clamp(20px, 2.4vw, 28px) !important;
        line-height: 1.15 !important;
    }

    .accordion-header {
        font-size: 13px !important;
        padding: 0 !important;
    }

        .accordion-header img {
            width: 20px !important;
        }

    /* Feature cards — match target screenshot spacing */
    .accordion-item.wn-feature-card {
        margin-bottom: 8px !important;
    }

        .accordion-item.wn-feature-card .accordion-header {
            padding: 7px 8px !important;
            gap: 14px !important;
        }

    .wn-feat-icon {
        width: 44px !important;
        height: 44px !important;
        flex-shrink: 0 !important;
    }

        .wn-feat-icon img {
            width: 28px !important;
            height: 28px !important;
        }

    /* Version group header spacing */
    .conferencetextBold.wn-version-header {
        padding: 10px 14px !important;
        font-size: 14px !important;
        margin-bottom: 6px !important;
    }

    .accordion-content {
        font-size: 12px !important;
    }

    .accordion-item {
        margin-bottom: 8px !important;
    }

    #tblview {
        padding-top: 10px !important;
    }

    #lblRMSfeatures {
        padding-left: 8px !important;
    }

    #usrwhatsnewcookie {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }

    /* Footer — fixed at bottom, centred, transparent */
    .footer-section {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        justify-content: center !important;
        padding: 6px clamp(20px, 4vw, 48px) !important;
        z-index: 200 !important;
        background: transparent !important;
        backdrop-filter: none !important;
    }

    .footertext {
        /*        font-size: 12px !important;*/
        position: static !important;
        bottom: auto !important;
        right: auto !important;
    }
}

/* ============================================================
   TABLET (768–1023px) & MOBILE (< 768px)
   Single-column stacked — sections shown one by one:
     1. Login Panel  (top, centred, full width)
     2. What's New   (below, full width, scrollable)
     3. Footer       (flows naturally below What's New content)
   ============================================================ */
@media screen and (max-width: 1023px) {

    /* ── Container: vertical stack, full page scroll ── */
    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        height: auto !important;
    }

    #usrLogin_loginContainer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        box-sizing: border-box !important;
        background-image: none !important;
        background-size: cover !important;
        background-position: center center !important;
    }

        /* Remove bird background on all login theme variants for tablet/mobile */
        #usrLogin_loginContainer.law,
        #usrLogin_loginContainer.fire,
        #usrLogin_loginContainer.cms,
        #usrLogin_loginContainer.crm,
        #usrLogin_loginContainer.ia,
        #usrLogin_loginContainer.AzureAD,
        #usrLogin_loginContainer.law-mobile {
            background-image: none !important;
        }
        /* ── Section 1: Login Panel — full width, starts from top ── */
        #usrLogin_loginContainer #login-widget {
            position: relative !important;
            right: auto !important;
            left: auto !important;
            top: auto !important;
            width: 100% !important;
            max-width: 430px !important;
            min-height: unset !important;
            height: auto !important;
            margin: 0 auto !important;
            padding: 32px 20px 24px !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: flex-start !important;
            background: transparent !important;
            box-shadow: none !important;
            border: none !important;
            overflow: visible !important;
            box-sizing: border-box !important;
        }

            #usrLogin_loginContainer #login-widget #Pnxlogo {
                height: auto !important;
                padding-right: 0 !important;
                display: block !important;
                margin: 0 auto 8px !important;
            }

            #usrLogin_loginContainer #login-widget .header-wrap {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                width: 100% !important;
            }

            #usrLogin_loginContainer #login-widget .login-header {
                text-align: center !important;
                width: 100% !important;
            }

                #usrLogin_loginContainer #login-widget .login-header h2 {
                    font-size: clamp(36px, 9vw, 60px) !important;
                    margin: 6px 0 2px !important;
                    text-align: center !important;
                    letter-spacing: -1px !important;
                }

                #usrLogin_loginContainer #login-widget .login-header h3 {
                    font-size: clamp(24px, 6vw, 44px) !important;
                    margin: 0 0 12px !important;
                    text-align: center !important;
                }

            #usrLogin_loginContainer #login-widget .login-control-group {
                width: 100% !important;
                margin-top: 0 !important;
            }

            #usrLogin_loginContainer #login-widget .input-control {
                width: 100% !important;
                margin-bottom: 12px !important;
            }

                #usrLogin_loginContainer #login-widget .input-control .login-input {
                    width: 100% !important;
                    font-size: 24px !important;
                }

            #usrLogin_loginContainer #login-widget .select-options,
            #usrLogin_loginContainer #login-widget .select-options .lstProductDB {
                width: 100% !important;
            }

            /* Buttons: LOGIN (combo) left, RESET right — same grid as desktop */
            #usrLogin_loginContainer #login-widget .login-buttons {
                width: 100% !important;
                margin-top: 14px !important;
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(100px, .52fr) !important;
                gap: 10px !important;
                flex-direction: unset !important;
            }

                #usrLogin_loginContainer #login-widget .login-buttons .login-combo {
                    width: 100% !important;
                    display: grid !important;
                    grid-template-columns: minmax(0, 1fr) !important;
                }

                    #usrLogin_loginContainer #login-widget .login-buttons .login-combo .login-form-btn {
                        flex: unset !important;
                        font-size: 20px !important;
                        border-radius: 11px !important;
                        width: 100% !important;
                    }

                #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset {
                    width: 100% !important;
                    font-size: 20px !important;
                    border-radius: 11px !important;
                    flex: unset !important;
                    display: block !important;
                }

    #forgethide,
    #usrLogin_upForgotPwd {
        width: 100% !important;
        text-align: center !important;
        right: auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* hide cookie row inside login widget — it appears below in usrwhatsnew */
    #usrLogin_loginContainer #login-widget #usrwhatsnewcookie {
        display: none !important;
    }

    .UsrLoginLabelUserName,
    .UsrLoginLabelPassword,
    .UsrLoginLabeldatabase {
        padding-right: 0 !important;
        /*        font-size: 13px !important;*/
        display: flex;
    }

    #loginsigin {
        /*        font-size: 24px !important;*/
        margin: 2px 0px 8px !important;
        /*        text-align: center !important;*/
    }

    p#usrLogin_forgethide {
        margin: -54px;
    }
    /* ── Section 2: What's New — flows below login, full width ── */
    #usrwhatsnew {
        display: block !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 600px !important;
        margin: 0 auto !important;
        padding: 0 16px 16px !important;
        margin-top: 16px !important;
        box-sizing: border-box !important;
        background: unset !important;
    }

    /* Override absolute positioning from base .law rule */
    #usrLogin_loginContainer.law ~ #usrwhatsnew,
    .law #usrwhatsnew {
        position: relative !important;
        right: auto !important;
        margin-top: 16px !important;
    }

    #usrWhatsNew_accordionCustom {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 64px !important;
    }

    #usrwhatsnewcontent {
        display: block !important;
    }

    /* accordion height handled by the shared ≤1299px block */

    #usrwhatsnewheader {
        display: block !important;
        margin-bottom: 10px !important;
        padding-top: 8px !important;
    }

    #tblview {
        display: block !important;
        padding-top: 10px !important;
    }

    #usrwhatsnewcookie {
        display: block !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        padding: 6px 0 !important;
    }

    #lblRMSfeatures {
        padding-left: 10px !important;
    }

    .accordion-header {
        font-size: 14px !important;
        padding: 8px 10px !important;
    }

        .accordion-header img {
            width: 20px !important;
        }

    .accordion-item {
        margin-bottom: 6px !important;
    }

    .feature-name {
        font-size: 13px !important;
    }

    .accordion-content {
        font-size: 12px !important;
    }

    /* ── Footer — visible on tablet/mobile, centred, flows below login ── */
    .footer-section,
    div.footer-section {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 10 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 10px 16px 16px !important;
        flex-shrink: 0 !important;
    }

        /* Settings icon — hide on tablet/mobile */
        .footer-section .settings-icon,
        div.footer-section .settings-icon {
            display: none !important;
        }

    .footertext {
        /*        font-size: 11px !important;*/
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        text-align: center !important;
    }
}

/* ============================================================
   WHAT'S NEW — shared styles for stacked layouts (≤ 1023px tablet + mobile)
   Login top, What's New scrolls below. Full content visible.
   ============================================================ */
@media screen and (max-width: 1023px) {

    /* Container: full page scroll */
    #usrLogin_loginContainer {
        overflow-y: auto !important;
        height: auto !important;
    }

    body {
        overflow-y: auto !important;
        height: auto !important;
    }

    /* What's New wrapper: full width, centred, no height cap */
    #usrwhatsnew {
        display: block !important;
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 540px !important;
        margin: 0 auto !important;
        padding: 0 16px 16px !important;
    }

    /* Cancel the base .law absolute right: offset */
    #usrLogin_loginContainer.law ~ #usrwhatsnew,
    .law #usrwhatsnew {
        position: relative !important;
        right: auto !important;
        margin-top: 0 !important;
    }

    /* Era kicker + title — no background box, transparent */
    #usrwhatsnewheader {
        display: block !important;
        padding-top: 16px !important;
        margin-bottom: 12px !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    /* Announcement card: full width, no fixed height */
    #usrWhatsNew_accordionCustom {
        display: block !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 64px !important;
        margin-bottom: 16px !important;
    }

    /* What's New content panel: full width, proper panel styling preserved */
    #usrwhatsnewcontent {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: unset !important;
        height: auto !important;
        box-sizing: border-box !important;
        /* preserve base glassmorphism: background, border, border-radius intact */
    }

    /* Accordion: scrollable within the panel — no max-height cap, page scrolls */
    #usrWhatsNew_accordion {
        max-height: none !important;
        overflow-y: visible !important;
        overflow: visible !important;
        flex: 1 1 auto !important;
    }

    /* Version group items: fully expanded */
    .wn-version-items {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Feature cards — proper spacing */
    .accordion-item.wn-feature-card {
        margin-bottom: 10px !important;
    }

        .accordion-item.wn-feature-card .accordion-header {
            gap: 14px !important;
        }

    .wn-feat-icon {
        width: 44px !important;
        height: 44px !important;
    }

        .wn-feat-icon img {
            width: 28px !important;
            height: 28px !important;
        }

    .wn-feat-title .feature-name {
        font-size: 15px !important;
        font-weight: 700 !important;
    }

    /* Version group headers — preserve styling */
    .conferencetextBold.wn-version-header {
        padding: 10px 14px !important;
        font-size: 14px !important;
        letter-spacing: 1px !important;
        margin-bottom: 8px !important;
    }

    .wn-version-count {
        font-size: 12px !important;
        opacity: 0.7 !important;
    }

    .wn-feat-title .feature-name {
        font-size: 14px !important;
        white-space: normal !important;
    }

    /* Version headers */
    .conferencetextBold.wn-version-header {
        font-size: 13px !important;
        padding: 8px 10px !important;
    }

    /* Hide/View RMS row */
    #tblview {
        display: block !important;
        padding-top: 12px !important;
        width: 100% !important;
    }

    #usrwhatsnewcookie {
        display: block !important;
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        padding: 8px 0 !important;
    }

    #lblRMSfeatures {
        padding-left: 10px !important;
    }

    /* Mission quote — sits at bottom of What's New section, above footer */
    .phoenix-mission-quote {
        display: block !important;
        text-align: center !important;
        padding: 12px 16px 6px !important;
        font-size: 13px !important;
        font-style: italic !important;
        color: rgb(246 251 255 / 90%) !important;
        margin-bottom: 0 !important;
    }

    /* Footer: visible on tablet/mobile, centred, flows below login */
    .footer-section,
    div.footer-section {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 10px 16px 16px !important;
    }

        /* Hide settings icon on tablet/mobile */
        .footer-section .settings-icon,
        div.footer-section .settings-icon {
            display: none !important;
        }

    .footertext {
        /*        font-size: 11px !important;*/
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        text-align: center !important;
    }
}

/* ── Small phones ≤ 480px — tighten further ── */
@media screen and (max-width: 480px) {

    #usrLogin_loginContainer #login-widget {
        padding: 16px 14px 16px !important;
        max-width: 100% !important;
    }

        #usrLogin_loginContainer #login-widget .login-header h2 {
            font-size: clamp(32px, 11vw, 50px) !important;
        }

        #usrLogin_loginContainer #login-widget .login-header h3 {
            font-size: clamp(22px, 8vw, 38px) !important;
        }

        #usrLogin_loginContainer #login-widget .input-control .login-input {
            font-size: 24px !important;
        }

        #usrLogin_loginContainer #login-widget .login-buttons .login-combo,
        #usrLogin_loginContainer #login-widget .login-buttons .login-form-btn.reset {
            font-size: 20px !important;
        }

    #usrwhatsnew {
        padding: 0 10px 3px !important;
    }
}

/*Added By Jebaz For Crm#170311*/
#usrLogin_txtUserName {
    font-family: 'Segoe UI', sans-serif !important;
    font-weight: normal !important;
    font-size: 24px !important;
    color: #ffffff !important;
}

.conferencetextLine2 {
    padding: 3px;
    padding-left: 3px;
    cursor: default;
    padding-right: 124px;
    color: #D1D1D1;
    white-space: nowrap;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 18px;
    /*    width: 700px;*/
}
/*Added By Subashini For Crm#185913*/
.conferencetextLine3 {
    /* padding: 1px;
    vertical-align: top;
     padding-right: 124px;
         padding-left: 19px;
    width: 700px;
    line-height: inherit;
   */
    cursor: pointer;
    color: #2B97F1;
    white-space: nowrap;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 18px;
    /*border-bottom: 1px solid #4D4D4D;*/
}

.slider-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/*.slider-inner {
    display: flex;
    transition: transform 0.8s ease-in-out;
    width: 100%;
}*/
.slider-inner {
    height: 70px;
}

.accordion-item,
.accordion-alignitem {
    flex: 0 0 100%;
    box-sizing: border-box;
}

.accordion-alignitem {
    height: 70px;
}

/* Slider dots — positioned inside the announcement card, right side */
.slider-dots {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    z-index: 10;
}

    .slider-dots .dot {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        display: inline-block;
        cursor: pointer;
        transition: background-color 0.5s ease;
        background: rgba(255, 255, 255, .34);
    }

        .slider-dots .dot.active {
            background-color: #29a8ff;
            box-shadow: 0 0 6px rgba(41, 168, 255, .80);
        }

/* Make slider-wrapper relative so dots anchor inside it */
#usrWhatsNew_accordionCustom .slider-wrapper {
    position: relative;
}


@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    .slider-dots {
        right: 16px;
        top: 50%;
    }
}

.accordion-item .slider-wrapper {
    height: 150px;
    overflow: hidden;
    position: relative;
}

.conferencetextLine4 {
    color: #579fcc;
    white-space: nowrap;
    font-family: 'Segoe UI';
    font-weight: normal;
    font-size: 22px;
    position: relative;
    bottom: 10px;
}

/* Chrome, Safari, Edge */
/*#usrWhatsNew_accordion::-webkit-scrollbar {
    width: 14px;*/ /* wider like in your screenshot */
/*}

#usrWhatsNew_accordion::-webkit-scrollbar-track {
    background: #2c3545;*/ /* dark background track */
/*}

#usrWhatsNew_accordion::-webkit-scrollbar-thumb {
    background: #666;*/ /* draggable part */
/*border-radius: 2px;
    border: 1px solid #444;*/ /* gives a subtle edge like classic scrollbars */
/*}
    #usrWhatsNew_accordion::-webkit-scrollbar-thumb:hover {
        background: #555;*/ /* hover color */
/*}*/
/*div#usrWhatsNew_accordion {
    padding-right:150px;
}*/
/*div#usrWhatsNew_accordion {
    overflow-y: auto;*/ /* enable vertical scroll */
/*overflow-x: hidden;*/ /* avoid horizontal scroll */
/*direction: rtl;*/ /* flip content direction */
/*}

    div#usrWhatsNew_accordion > * {
        direction: ltr;*/ /* restore normal text direction for child content */
/*}*/



/* ---------- Scrollbar styles for #usrWhatsNew_accordion ---------- */
/* Color reference you provided is encoded into CSS variables so everything derives from it. */
#usrWhatsNew_accordion {
    /* reference colors (edit these to tweak globally) */
    --scroll-thumb: rgba(200, 200, 200, 0.15); /* light gray, semi-transparent (thumb) */
    --scroll-thumb-hover: rgba(200, 200, 200, 0.35);
    --scroll-thumb-active: rgba(200, 200, 200, 0.5);
    --scroll-track: rgba(44, 53, 69, 0.3); /* dark bluish track */
    --scroll-edge: rgba(44, 53, 69, 0.6); /* darker edge for thumb border */
    max-height: 535px;
    transition: max-height 0.3s ease;
    overflow-y: auto; /* vertical scroll only when needed */
    /*height: 425px;*/
    padding-left: 2px;
    padding-right: 12px;
    /* Firefox */
    scrollbar-width: thin; /* keep as your original (auto/thin/none) */
    scrollbar-color: var(--scroll-thumb) var(--scroll-track); /* thumb | track */
}

    /* ---------- WebKit (Chrome, Edge, Safari) ---------- */
    #usrWhatsNew_accordion::-webkit-scrollbar {
        width: 14px; /* same as your screenshot */
    }

    /* track (the background area) */
    #usrWhatsNew_accordion::-webkit-scrollbar-track,
    #usrWhatsNew_accordion::-webkit-scrollbar-track-piece {
        background: var(--scroll-track);
        border-radius: 2px;
    }

    /* thumb (the draggable part) */
    #usrWhatsNew_accordion::-webkit-scrollbar-thumb {
        background: var(--scroll-thumb);
        border-radius: 2px;
        border: 1px solid var(--scroll-edge); /* subtle edge */
        /* keeps semi-transparent thumb looking crisp */
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
    }

        /* hover / active states derived from the same base color */
        #usrWhatsNew_accordion::-webkit-scrollbar-thumb:hover {
            background: var(--scroll-thumb-hover);
        }

        #usrWhatsNew_accordion::-webkit-scrollbar-thumb:active {
            background: var(--scroll-thumb-active);
        }

    /* corner where horizontal & vertical meet (keep transparent) */
    #usrWhatsNew_accordion::-webkit-scrollbar-corner {
        background: transparent;
    }

div#usrWhatsNew_accordion {
    overflow-y: auto; /*enable vertical scroll */
    overflow-x: hidden; /*avoid horizontal scroll*/
}

.heading-align {
    /* Mirrors .pp-wn-head from Newhtmllogin.aspx */
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid rgba(74, 174, 255, .28);
    background: linear-gradient(90deg, rgba(16, 46, 85, .26), rgba(255, 255, 255, .02));
    margin-bottom: 12px;
    margin-left: -16px;
    margin-right: -3px;
}

    /* WHAT'S NEW title — mirrors .pp-wn-title */
    .heading-align h2 {
        /* font-weight: 900; */
        font-size: 23px;
        letter-spacing: .22em;
        white-space: nowrap;
        color: rgba(255, 255, 255, .96);
        margin: 0;
        padding: 0;
        text-transform: uppercase;
    }

    /* Subtitle — mirrors .pp-wn-sub */
    .heading-align .pp-wn-sub {
        color: rgba(232, 244, 255, .76);
        font-size: 12px;
        white-space: nowrap;
        overflow: visible;
        margin: 0;
        padding: 0;
        display: none;
    }

div#usrWhatsNew_accordion > * {
    direction: ltr; /*restore normal text direction for child content */
}

.conferencetextBold {
    font-family: 'Segoe UI';
    font-size: 21px;
    font-weight: bold;
    color: #D1D1D1;
    width: 100%;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .032));
    border: 1px solid rgba(255, 255, 255, .08);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
    margin-bottom: 8px;
    padding: 11px 12px;
    cursor: pointer;
}

/* Version group header — clickable row with arrow + count */
.wn-version-header {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

    .wn-version-header:hover {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05)) !important;
        border-color: rgba(255, 255, 255, 0.18) !important;
    }

.wn-version-arrow {
    font-size: 13px;
    color: #41a6fa;
    margin-right: 8px;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.wn-version-name {
    flex: 1;
    letter-spacing: 2px;
    font-size: 20px;
    /* font-weight: 700; */
    color: #41a6fa;
    text-transform: uppercase;
}

.wn-version-count {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #41a6fa;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Collapsible items container */
.wn-version-items {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    max-height: 9999px;
    opacity: 1;
}

    .wn-version-items.collapsed {
        max-height: 0 !important;
        opacity: 0;
        pointer-events: none;
    }

.close-btn {
    height: clamp(56px, 8.6vh, 68px);
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .42);
    background: linear-gradient(180deg, rgba(88, 92, 103, .86), rgba(37, 41, 52, .92) 55%, rgba(19, 22, 31, .96));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 24px rgba(0, 0, 0, .30);
}

.login-btn, .close-btn {
    border: 0;
    color: #fff;
    font-size: clamp(16px, 4.8vw, 20px);
    font-weight: 800;
    letter-spacing: .1px;
    cursor: pointer;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

@media (max-width: 944px) and (max-height: 919px) {
    /*    #usrLogin_loginContainer.law {
        background-image: url('../../images/phoenixlogin/Law_Double_Bg-Small.jpg') !important;
    }*/
    body {
        overflow-x: hidden !important;
    }
}

.accordion-text { /*Added by subashini for CRM#186399*/
    /*    flex: 0;
    width: 675px;*/
    max-width: 355px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.glass-card {
    width: 240px;
    height: 360px;
    background: rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0px 0px rgba(255, 255, 255, 0);
    position: relative;
    overflow: hidden;
}

    .glass-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent );
    }

    .glass-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: linear-gradient( 180deg, rgba(255, 255, 255, 0.8), transparent, rgba(255, 255, 255, 0.3) );
    }

.accordion-icon { /*Added by subashini for CRM#186399*/
    flex-shrink: 0;
    display: flex;
    align-items: flex-start; /* ensures icon stays at the top */
    padding-top: 2px; /* fine-tune alignment if needed */
}

.scrollcontent {
    transition: max-height 0.3s ease;
    max-width: 700px;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: block;
    height: auto;
    overflow: visible;
    padding-right: 5px;
    padding-bottom: 10px;
    background: transparent;
    border-radius: 0;
}

    .scrollcontent::-webkit-scrollbar {
        width: 6px; /* same as w-2 */
    }

    /* Scrollbar track */
    .scrollcontent::-webkit-scrollbar-track {
        background-color: rgba(44, 53, 69, 0.3); /* gray-100 */
    }

    /* Scrollbar thumb */
    .scrollcontent::-webkit-scrollbar-thumb {
        background-color: rgba(200, 200, 200, 0.15); /* gray-300 */
    }

    .scrollcontent .accordion-header .accordion-icon img {
        width: 50px;
        height: 50px;
        object-fit: contain;
    }


/* ============================================================
   #usrWhatsNew_accordionCustom — Announcement card
   Render-in-place pattern. Mirrors .phoenix-announcement
   from Newhtmllogin.aspx v3.6 exactly.
   ============================================================ */

#usrWhatsNew_accordionCustom {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative;
}

    /* Card wrapper — matches .phoenix-announcement */
    #usrWhatsNew_accordionCustom .pp-ann-card {
        width: 100%;
        height: 110px;
        border-radius: 15px;
        background: radial-gradient(circle at 5% 50%, rgba(255,157,36,.20), transparent 22%) /*,
        linear-gradient(90deg, rgba(7,24,48,.82), rgba(7,17,36,.68))*/;
        backdrop-filter: blur(11px);
        -webkit-backdrop-filter: blur(11px);
        box-shadow: 0 22px 74px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
        /* 3-column grid: icon | body | dots */
        display: grid;
        grid-template-columns: 52px 1fr auto;
        align-items: start;
        gap: 3px;
        padding: 3px 8px;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
    }

        /* Shine sweep */
        #usrWhatsNew_accordionCustom .pp-ann-card::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.075), transparent 50%);
            transform: translateX(-120%);
            animation: ppAnnCardShine 9s ease-in-out infinite;
            pointer-events: none;
        }

@keyframes ppAnnCardShine {
    0%, 68% {
        transform: translateX(-120%);
    }

    78%, 100% {
        transform: translateX(120%);
    }
}

/* Grid col 1 — icon circle */
#usrWhatsNew_accordionCustom .pp-ann-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(255,161,36,.32), rgba(20,111,255,.26));
    border: 1px solid rgba(74,174,255,.28);
    box-shadow: inset 0 0 18px rgba(255,170,35,.12), 0 0 22px rgba(255,120,20,.10);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    align-self: center;
}

    #usrWhatsNew_accordionCustom .pp-ann-icon img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

/* Grid col 2 — text body */
#usrWhatsNew_accordionCustom .pp-ann-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    z-index: 1;
}

/* Cyan kicker */
#usrWhatsNew_accordionCustom .pp-ann-kicker {
    color: #39e8ff;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    line-height: 1.2;
    display: none;
}

/* Bold white title — clamped to 2 lines (~150 chars visible) */
#usrWhatsNew_accordionCustom .pp-ann-title {
    /* margin-top: 10px; */
    font-size: 21px;
    /* font-weight: 800; */
    color: rgba(255,255,255,.96);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    word-break: break-word;
}

/* Muted description — plain text, max 50 chars (set by JS), single line clamp */
#usrWhatsNew_accordionCustom .pp-ann-text {
    margin-top: 3px;
    font-size: 13px;
    color: rgba(232,244,255,.82);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* Grid col 3 — dots row (NO border, NO separator) */
#usrWhatsNew_accordionCustom .pp-ann-dots {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding-right: 2px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    border: none !important;
    border-left: none !important;
    outline: none !important;
    margin-top: 4px;
    align-self: center;
}

#usrWhatsNew_accordionCustom .pp-ann-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.34);
    cursor: pointer;
    transition: background-color 0.45s ease;
    display: inline-block;
    border: none;
}

    #usrWhatsNew_accordionCustom .pp-ann-dot.active {
        background: #29a8ff;
        box-shadow: 0 0 10px rgba(41,168,255,.82);
    }

/* Footer always visible at bottom of viewport — override all media-query offsets */
.footer-section {
    position: fixed !important;
    bottom: 0 !important;
    width: 100% !important;
    z-index: 0 !important;
    background: transparent !important;
    /* left and justify-content are controlled by JS (updateFooterAlignment):
       What's New open  → left:86px, justify-content:flex-start
       What's New hidden → left:0,   justify-content:center            */
}

/* ── Tablet & Mobile (≤ 1023px): footer visible below login, What's New hidden ── */
@media screen and (max-width: 1023px) {
    .footer-section,
    div.footer-section {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        z-index: 10 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        transform: none !important;
        margin: 0 auto !important;
        padding: 10px 16px 16px !important;
        gap: 5px !important;
    }

        .footer-section .settings-icon,
        div.footer-section .settings-icon {
            display: none !important;
        }

    /* Hide What's New panel entirely on tablet/mobile */
    #usrwhatsnew,
    #usrwhatsnewcookie {
        display: none !important;
    }

    .footertext {
        /*        font-size: 11px !important;*/
        position: static !important;
        bottom: auto !important;
        right: auto !important;
        text-align: center !important;
    }
}

.footertext {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
}

.sep {
    font-size: 13px !important;
    padding: 0px 10px !important;
}

/* Allow the login container to scroll on short viewports so footer never clips content */
#usrLogin_loginContainer {
    /*    overflow-y: auto !important;*/
    overflow-x: hidden !important;
}

/* Ensure widget bottom content never hides behind fixed footer */
#login-widget {
    padding-bottom: 77px !important;
}

/* upForgotPwd and cookie row — keep above footer layer */
#usrLogin_upForgotPwd,
#usrwhatsnewcookie {
    position: relative;
    z-index: 1;
}

/* ── What's New feature card — always-visible title + description ── */
.accordion-item.wn-feature-card {
    margin-bottom: 6px;
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.075), rgba(255,255,255,.032));
    border: 1px solid rgba(255,255,255,.08);
    transition: background .18s ease, border-color .18s ease;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

    /* Hover state — orange border glow matching reference */
    .accordion-item.wn-feature-card:hover {
        background: linear-gradient(90deg, rgba(255,255,255,.072), rgba(255,255,255,.026));
        border-color: rgba(255,159,28,.30);
        box-shadow: 0 8px 24px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.025);
    }

    .accordion-item.wn-feature-card .accordion-header {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 4px 5px;
        cursor: pointer;
        width: 100%;
        box-sizing: border-box;
        font-size: inherit;
        word-wrap: break-word;
    }

/* Icon circle — matches pp-feature-icon from reference */
.wn-feat-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

    .wn-feat-icon img {
        width: 22px;
        height: 22px;
        object-fit: contain;
    }

/* Text body — title + description */
.wn-feat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Bold white title */
.wn-feat-title .feature-name {
    /* display: block; */
    font-family: 'Segoe UI';
    font-size: 21px;
    /* font-weight: 700; */
    color: rgba(255,255,255,.96);
    white-space: normal;
    word-wrap: break-word;
    overflow: visible;
    max-height: none;
    line-height: 1.3;
}

/* Muted description — max 100 chars, single line with ellipsis */
.wn-feat-desc {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    color: rgba(232,244,255,.68);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
    cursor: default;
    display: none;
}


/* data-tooltip hover tooltip -- shows full title text at 21px */
#usrWhatsNew_accordionCustom .pp-ann-title[data-tooltip] {
    position: relative;
    cursor: default;
}

    #usrWhatsNew_accordionCustom .pp-ann-title[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        bottom: calc(100% + 8px);
        left: 0;
        background: rgba(15, 30, 50, 0.92);
        color: #fff;
        font-size: 8px;
        line-height: 1.4;
        padding: 8px 12px;
        border-radius: 6px;
        white-space: normal;
        word-break: break-word;
        max-width: 320px;
        min-width: 120px;
        z-index: 99999;
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

    #usrWhatsNew_accordionCustom .pp-ann-title[data-tooltip]:hover::after {
        opacity: 1;
        visibility: visible;
    }
/* Body-level tooltip — appended to <body> by JS so overflow:hidden ancestors can't clip it */
#wn-desc-tooltip {
    position: fixed;
    z-index: 99999;
    max-width: 400px;
    white-space: normal;
    background: #717171;
    color: rgba(225, 240, 255, 0.92);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 21px;
    font-weight: 400;
    line-height: 1.3;
    padding: 6px 10px;
    border-radius: 5px;
    border: 1px solid rgba(90, 130, 190, 0.35);
    box-shadow: 0 4px 18px rgba(0,0,0,.55);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Play button — hidden by default, slides in on hover, clickable to play video */
.wn-feat-demo {
    opacity: 0;
    transform: translateX(6px) scale(.92);
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: rgba(255,210,132,.92);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255,159,28,.12);
    border: 1px solid rgba(255,210,132,.24);
    box-shadow: 0 0 14px rgba(255,130,38,.12);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    pointer-events: none;
    cursor: pointer;
    user-select: none;
}

.accordion-item.wn-feature-card:hover .wn-feat-demo,
.accordion-item.wn-feature-card:focus-within .wn-feat-demo {
    opacity: 1;
    transform: translateX(0) scale(1);
    pointer-events: auto;
}

.wn-feat-demo:hover {
    background: rgba(255,159,28,.26);
    border-color: rgba(255,210,132,.50);
}

/* Hide play button on items with no video */
.wn-feat-demo.no-video {
    display: none !important;
}

body.login-page {
    background-image: unset !important;
}
/* (right-logo-link removed — wn-feat-demo handles play icon) */


/* (responsive breakpoints are defined above in the 1024-1299 and ≤1023 blocks) */