/* helvetiva now */
@font-face{
    font-family:"HelveticaNow";
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Rg.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Rg.eot?") format("eot"),
        url("../font/HelveticaNowDisplayW05-Rg.woff2") format("woff2"),
        url("../font/HelveticaNowDisplayW05-Rg.woff") format("woff"),
        url("../font/HelveticaNowDisplayW05-Rg.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}
@font-face{
    font-family:"HelveticaNow";
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Lt.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Lt.eot?") format("eot"),
        url("../font/HelveticaNowDisplayW05-Lt.woff2") format("woff2"),
        url("../font/HelveticaNowDisplayW05-Lt.woff") format("woff"),
        url("../font/HelveticaNowDisplayW05-Lt.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face{
    font-family:"HelveticaNow";
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Md.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Md.eot?") format("eot"),
        url("../font/HelveticaNowDisplayW05-Md.woff2") format("woff2"),
        url("../font/HelveticaNowDisplayW05-Md.woff") format("woff"),
        url("../font/HelveticaNowDisplayW05-Md.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face{
    font-family:"HelveticaNow";
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Bold.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Bold.eot?") format("eot"),
        url("../font/HelveticaNowDisplayW05-Bold.woff2") format("woff2"),
        url("../font/HelveticaNowDisplayW05-Bold.woff") format("woff"),
        url("../font/HelveticaNowDisplayW05-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face{
    font-family:"HelveticaNow";
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Bold.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/helvetica/HelveticaNowDisplayW05-Bold.eot?") format("eot"),
        url("../font/HelveticaNowDisplayW05-Bold.woff2") format("woff2"),
        url("../font/HelveticaNowDisplayW05-Bold.woff") format("woff"),
        url("../font/HelveticaNowDisplayW05-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
/* halesworth */
@font-face{
    font-family:"HalesworthET";
    src:url("https://lorealusa.vip/portal/170/fonts/halesworth/HalesworthET-Medium.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/halesworth/HalesworthET-Medium.eot?") format("eot"),
        url("../font/HalesworthET-Medium.woff2") format("woff2"),
        url("../font/HalesworthET-Medium.woff") format("woff"),
        url("../font/HalesworthET-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}
@font-face{
    font-family:"HalesworthET";
    src:url("https://lorealusa.vip/portal/170/fonts/halesworth/HalesworthET-Bold.eot?");
    src:url("https://lorealusa.vip/portal/170/fonts/halesworth/HalesworthET-Bold.eot?") format("eot"),
        url("../font/HalesworthET-Bold.woff2") format("woff2"),
        url("../font/HalesworthET-Bold.woff") format("woff"),
        url("../font/HalesworthET-Bold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'FontAwesome';
    src: url('../font/fontawesome-webfont.eot');
    src: url('../font/fontawesome-webfont.eot') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff2') format('woff2'),
         url('../font/fontawesome-webfont.woff') format('woff'),
         url('../font/fontawesome-webfont.ttf') format('truetype'),
         url('../font/fontawesome-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal
}

.customPortal {
    background: #ebe7e1;
    font-family: "HelveticaNow", Helvetica, sans-serid;
}

.customPortal .formContainer {
    border: 1px solid #d8d8d8;
    border-radius: 10px;
    width: 100%;
    max-width: 400px
}
.customPortal .loginPageHeader {
    padding: 60px 40px 20px !important;
    border-radius: 10px;
    background-image: url('../image/logo--default.svg');
    background-repeat: no-repeat;
    background-position: 50% 30px;
    background-size: 160px auto;
}
.customPortal .loginPageHeader img {
    display: none;
}

.customPortal .loginFormContainer {
    border: none;
    background: none;
    padding: 18px 40px 40px;
    border-radius: 0 0 5px 5px;
    text-align: left;
}

.customPortal .setYourNewPasswordTitle {
    font-family: "HalesworthET";
    font-weight: 500;
    font-size: 30px;
    letter-spacing: 1.5px;
    text-align: center;
    line-height: 1.2;
    padding: 0;
    width: 100%;
}
.customPortal .newPasswordMessage {
    text-align: center;
    margin: 10px auto 20px;
    font-size: 14px;
}

.customPortal .passwordInputsContainer {
    position: relative;
}
.customPortal div.passwordInputContainer {
    display: block;
    width: 100%;
}
.customPortal .tooltipHandler {
    position: absolute;
    top: 38px;
    right: -22px;
}
.customPortal .tooltipData {
    background-color: #1e1e1e;
}

.customPortal input:not([type="checkbox"]):not([type="radio"]):not([class*="select2"]),
.customPortal select,
.customPortal textarea {
    display: block;
    outline-width: 0;
    border-radius: 0;
    border-width: 1px;
    border-style: solid;
    border-color: #D8D8D8; /* var(--color--borders) */
    width: 100%;
    max-width: 100%;
    background-color: #FFFFFF;
    font-family: inherit;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    font-style: normal;
    color: #3d3d3d;
    -webkit-transition: all 250ms ease-in-out;
    -ms-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out;
}

.customPortal input:not([type="checkbox"]):not([type="radio"]):focus,
.customPortal select:focus,
.customPortal textarea:focus {
    border-color: #000000; /* var(--color--site) */
}

.customPortal .hasErrors input:not([type="checkbox"]):not([type="radio"]),
.customPortal .hasErrors select,
.customPortal .hasErrors textarea {
    border-color: #F93535;
}

.customPortal .login .loginFormContainer label {
    display: block;
    width: 100%;
    padding-bottom: 0;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.8px;
    color: #595959;
    -webkit-font-smoothing: antialiased;
}

.customPortal .infobox {
    background-color:#edecea;
    border: 1px solid #d8d8d8;
}

.customPortal .infoboxIcon {
    background-image: none;
    height: 16px;
    left: 4px;
    margin-left: 8px;
    position: absolute;
    width: 16px;
}

.customPortal .infoboxIcon:after {
    content: "\f071";
    font-family: 'FontAwesome';
    font-size: 17px;
}
.customPortal .tooltipTrigger {
    display: inline-block;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    margin-left: 8px;
    cursor: pointer;
    font-style: normal;
    vertical-align: middle ! important;
    background-color: transparent;
    background-image: none;
    background-size: contain;
    background-repeat: no-repeat;
}
.customPortal .tooltipTrigger:after {
    content: "\f05a";
    font-family: 'FontAwesome';
    font-size: 17px;
}

.submitButtonContainer {
    text-align: center;
}

.customPortal .login .submitButton,
.customPortal .Dialog .button {
    display: inline-block;
    border-radius: 25px;
    border-width: 1px;
    border-style: solid;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    text-transform: initial;
    text-decoration: none;
    text-align: center;
    vertical-align: baseline;
    white-space: normal;
    cursor: pointer;
    -webkit-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
    letter-spacing: .8px;
    padding: 11px 25px 12px; /* We achieve 45px height trough padding */
    min-width: 209px;
    border-color: #CDC4BA; /* var(--color--buttons) */
    background-color: #CDC4BA; /* var(--color--buttons) */
    color: #fff !important;
}
.customPortal .login .submitButton:hover,
.customPortal .login .submitButton:active,
.customPortal .login .submitButton:focus,
.customPortal .Dialog .button:hover,
.customPortal .Dialog .button:active,
.customPortal .Dialog .button:focus {
    border-color: #3d3d3d; /* var(--color--buttons) */
    background-color: #3d3d3d; /* var(--color--buttons--65) */
    color: #FFFFFF !important;
}

.customPortal .errorImage {
    max-width: 380px;
    width: 100%;
    filter: grayscale();
    margin-top: 0;
    display: none;
}
.customPortal .title {
    text-align: center;
    width: auto;
    color: #F93535;
    margin-top: 0
}

.customPortal .login .loginFormContainer .errorMsg {
    font-style: normal;
    font-size: 12px;
    color: #F93535;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3px;
}

@media screen and (max-width: 480px) {
    .customPortal .formContainer {
        margin: auto;
        box-sizing: border-box;
        width: 90vw
    }
}