/*npr will use the pbs font face for now*/
/*@font-face {*/
/*    font-family: OrgFont;*/
/*    font-weight: 400;*/
/*    src: local('Arial');*/
/*}*/

/*@font-face {*/
/*    font-family: OrgFont;*/
/*    font-weight: 700;*/
/*    src: local('Arial-Bold');*/
/*}*/

:root {
    --logo-width: 150px;
    --logo-height: 67px;

    /* color definition */
    --gray-95: #F2F2F2;
    --gray-key: #737373;
    --white: #ffffff;
    --black: #000000;

    /*--npr-blue: #006AFF;*/
    /*--npr-blue-lighter-15-percent: #2690FF;*/

    --npr-blue: #237BBD;
    --npr-blue-lighter-15-percent: #3191d9;

    /* standard colors */
    /* used for buttons */
    --primary: var(--npr-blue);
    --primary-lighter: var(--npr-blue-lighter-15-percent);
    /* used for text fields labels and icons */
    --primary-variant: var(--npr-blue);
    /* used for links on the page */
    --secondary: var(--npr-blue);
    --secondary-lighter: var(--npr-blue-lighter-15-percent);
    --accent: var(--black);

    /* buttons */
    --button-border-radius: 10px;

    --show-hide-password-color: var(--accent);
}

/* LIGHT MODE */
body {
    --font-style: 'sans-serif';

    --bkg-color: var(--white);
    --wrapper-color: var(--gray-95);

    --text-color: var(--accent);

    --header-color: var(--primary-variant);
    --header-hover-color: var(--primary-variant);

    --label-color: var(--accent);
    --link-color: var(--secondary);
    --link-hover-color: var(--secondary-lighter);

    --button-fill-text-color: var(--white);

    --button-fill-bkg-color: var(--primary);
    --button-fill-bkg-active-color: var(--primary-lighter);
    --button-fill-bkg-hover-color: var(--primary-lighter);

    --button-fill-border-color: var(--primary);
    --button-fill-border-hover-color: var(--primary-lighter);
    --button-fill-border-active-color: var(--primary-lighter);

    --button-no-fill-bkg-color: transparent;
    --button-no-fill-bkg-active-color: transparent;
    --button-no-fill-bkg-hover-color: transparent;

    --button-no-fill-border-color: var(--primary);
    --button-no-fill-border-hover-color: var(--primary-lighter);
    --button-no-fill-border-active-color: var(--primary-lighter);

    --button-no-fill-text-color: var(--primary);
    --button-no-fill-text-active-color: var(--primary-lighter);
    --button-no-fill-text-hover-color: var(--primary-lighter);

    --icon-user: url("https://static.publicmediasignin.org/npr/npr-org/img/user_icon-1.0.0.svg");
    --icon-badge: url("https://static.publicmediasignin.org/npr/npr-org/img/badge_icon-1.0.0.svg");
    --icon-lock: url("https://static.publicmediasignin.org/npr/npr-org/img/lock_icon-1.0.0.svg");
    --icon-arrow-right: url("https://static.publicmediasignin.org/npr/npr-org/img/arrow_right-1.0.0.svg");
    --icon-arrow-right-text: url("https://static.publicmediasignin.org/npr/npr-org/img/arrow_right_text-1.0.0.svg");
    --icon-pencil: url("https://static.publicmediasignin.org/npr/npr-org/img/pencil_icon-1.0.0.svg");
    --icon-collapse: url("https://static.publicmediasignin.org/npr/npr-org/img/collapse_icon-1.0.0.svg");

    --checkmark-color: var(--primary);

    background-color: var(--wrapper-color);
}

/* Sets a different border for Show Password widgets */
#signin-show-hide-password,
#register-show-hide-password,
#reset-password-show-hide-new-password,
#reset-password-show-hide-confirm-new-password {
    border-radius: 1px !important;
}

/* Hides any cancel link */
/*#cancel-link-container {*/
/*    display: none;*/
/*}*/

/*.cancel-link {*/
/*    display: none;*/
/*}*/

/* Defines the ---------- OR ---------- separator on the sign in page and register page */
#register-screen-or-spacer,
#signin-screen-or-spacer {
    display: flex;
    flex-direction: row;
}

#register-screen-or-spacer:before, #register-screen-or-spacer:after,
#signin-screen-or-spacer:before, #signin-screen-or-spacer:after{
    content: "";
    flex: 1 1;
    border-bottom: 1px solid var(--label-color);
    margin: auto;
}

#register-screen-or-spacer:before,
#signin-screen-or-spacer:before {
    margin-right: 30px;
}

#register-screen-or-spacer:after,
#signin-screen-or-spacer:after {
    margin-left: 30px;
}

/*Hides text suggestions on the sign in screen*/
#signIn > div.auth-screen.content-wrapper > p:nth-child(2) {
    display: none;
}

#signIn > div.auth-screen.content-wrapper > span.alternate-credentials {
    display: none;
}

#traditionalRegistration > div.auth-screen.content-wrapper > div.social-signin > p {
    display: none;
}

#traditionalRegistration > div.auth-screen.content-wrapper > div.traditional-registration > p {
    display: none;
}

/* Prevents delete button from jumping around when hovered over */
#deleteAccount {
    border: 0 !important;
}

#deleteAccount:hover,
#deleteAccount:active,
#deleteAccount:focus {
    border: 0 !important;
}

#mergeAccounts > div.auth-screen.content-wrapper > p:nth-child(6) {
    display: none;
}