:root {
    --white: hsl(0, 0%, 100%);
    --black: hsl(0, 0%, 0%);
    /* ARNEG red */
    --arnegRed: hsl(357, 94%, 46%);
    --arnegRed60: hsl(357, 94%, 60%);
    --arnegRed70: hsl(357, 80%, 70%);
    --arnegRed80: hsl(357, 94%, 80%);
    --arnegRed90: hsl(357, 94%, 90%);
    --arnegRed95: hsl(357, 94%, 95%);
    /* Grey */
    --grey10: hsl(0, 0%, 10%);
    --grey20: hsl(0, 0%, 20%);
    --grey30: hsl(0, 0%, 30%);
    --grey40: hsl(0, 0%, 40%);
    --grey50: hsl(0, 0%, 50%);
    --grey60: hsl(0, 0%, 60%);
    --grey70: hsl(0, 0%, 70%);
    --grey80: hsl(0, 0%, 80%);
    --grey90: hsl(0, 0%, 90%);
    /* animations */
    --accessibility-highlight-color: var(--arnegRed80);
    /*--accessibility-highlight-color: var(--grey70);*/
    --accessibility-highlight-position: inset;
}


.login-body-backGround {
    background-image: url("/CustomerPortal/ext-Arneg/Images/Arneg_Hero-png/portal.axd?v=8DF405E98873100");
    background-repeat: no-repeat;
    background-size: cover;
}

/* ========================================= LOGIN WINDOW ============================================== */
/* ================ TUCHPORTAL HEADER ======================*/
#LoginWindow {
    border-top-color: var(--white);
    padding-top: 5px;
    padding-bottom: 5px;
}

#loginBody .mainWindow {
    border-top-color: var(--white);
}
/* ===================== TOUCHPORTAL LOGO ==================== */
.portal-header-left, .portal-logo {
    background: url("/CustomerPortal/ext-Arneg/Images/arneg_logo-png/portal.axd?v=8DF405E98873100");
    background-repeat: no-repeat;
    background-size: contain;
    height: 80px;
    width: 210px;
}

.logo-container {
    padding-bottom: 0px;
}

/* ================ LOGIN TITLE ============================= */

/* ================= HORIZONTAL LINE ========================= */

#BaseLoginPanel-innerCt .login-title div {
    visibility: hidden;
}
#BaseLoginPanel-innerCt .login-title div::after {
    visibility: visible;
    content: "Accesso interno utenti Arneg Italia";
    display: block;
    font-size: 14px;
    color: var(--black);
}

#ExternalLoginPanel-targetEl .login-title div{
    visibility:hidden;
}
#ExternalLoginPanel-targetEl .login-title .x-autocontainer-outerCt .x-autocontainer-innerCt #ctl21_Content div::after {
    visibility: visible;
    content: "Accesso esterno / Arneg World";
    display: block;
    font-size: 14px;
    color: var(--black);
}

.external-login-buttons .btn.external-login-type-saml {
    background-position: 8px center;
    background-size: 20px;
    background-image: url("/CustomerPortal/ext-Arneg/Images/Okta_Aura_Black_L-png/portal.axd?v=8DF405E98873100");
}

/* ============= CHANGE PASSWORD BUTTON ==================== */
#cmdChange {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

#TitleCt {
    visibility: hidden;
    display: none;
}

#changePwd-btnInnerEl {
    color: var(--black);
}
/* ============= RESET PASSWORD BUTTON ==================== */
#ResetPasswordHyperLink {
    display: none;
    visibility: hidden;
}

/* ================= CHECK PERSISTENCE =================== */
#chkPersistence-boxLabelEl{
    color: var(--black);
}

/* ================ LOGIN BUTTON ========================= */
#cmdLogin {
    background-color: var(--black);
    color: var(--white);
    border-color: var(--black);
}

/* =================== FIRM ================================ */
.firm {
    display: none;
    visibility: hidden;
}

.vendor {
    display: none;
    visibility: hidden;
}

/* ================= LINK TO PUBLIC ==================== */
.LinkToPublic {
    display: none;
    visibility: hidden;
}

/* =============== FOOTER ============================ */
.login-footer {
    background-color: var(--black);
    color: var(--white);
    position: relative;
    bottom: -95vh;
    height: 5vh;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding-left: 40px;
    padding-right: 40px;
}