/* CBA customisations to PingFederate templates
 *
 * This CSS file is intended as an override to the PingFederate defaults
 * in main.css.
 * As such, it should be loaded after main.css in the relevant templates.
 */

/* CBA Beacon Sans */
@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Regular"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Regular.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Regular.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Regular.ttf")   format("truetype");
    font-style: normal;
    font-weight: normal;
}

@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Bold"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Bold.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Bold.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Bold.ttf")   format("truetype");
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Italic"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Italic.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Italic.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-Italic.ttf")   format("truetype");
    font-style: italic;
    font-weight: normal;
}

@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Bold Italic"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-BoldItalic.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-BoldItalic.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-BoldItalic.ttf")   format("truetype");
    font-style: italic;
    font-weight: bold;
}

@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Extra Bold"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBold.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBold.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBold.ttf")   format("truetype");
    font-style: normal;
    font-weight: 800;
}

@font-face {
    font-family: "CBA Beacon Sans"
    src: local("CBA Beacon Sans Extra Bold Italic"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBoldItalic.woff2") format("woff2"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBoldItalic.woff")  format("woff"),
         url("../fonts/cba-beacon-sans/CBABeaconSans-ExtraBoldItalic.ttf")   format("truetype");
    font-style: italic;
    font-weight: 800;
}

/* Background image */
#cba-ping-container {
    background-repeat: no-repeat;
    background-size: 480px;
    background-image: url('../images/cba_background.png');
}

#cba-ping-body-container {
    margin-top: 100px;
}

/* Begin main.css overrides
 *
 * The overrides are listed in the same order as their counterparts in
 * main.css.
 */

/* Button font and colours
 * 
 * Note: the revised font family declarations used here and elsewhere
 * also fix a bug in main.css; sans-serif should not be in quotes as it
 * is a generic name
 */
input[type=button],
input[type=submit],
.ping-button,
.button,
button {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

input[type=button]:hover,
input[type=submit]:hover,
.ping-button:hover,
.button:hover,
button:hover {
    color: #ffcc00;
}

input[type=button].primary,
input[type=button].normal,
input[type=submit].primary,
input[type=submit].normal,
.ping-button.primary,
.ping-button.normal,
.button.primary,
.button.normal,
button.primary,
button.normal {
    background-color: #ffcc00;
    color: #000;
}

.rocker-button {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

/* Body elements */
body {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
    color: #79838c;
}

strong {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
    font-weight: bold;
}

/* Various fields */
label,
.ping-input-label,
.ping-input-container {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

/* Overriding width as PingFederate 11.x uses 110% by default here 
 * Also match background colour and margins to input fields
 */
.input-select select,
.ping-input-container select {
    width: 100%;
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
    background-color: #f0f6f7;
    margin: 7px 0 0 0;
    display: block;
}

.required.input-text input[type=text],
.required.input-text input[type=password],
.required.input-text textarea,
.required.input-text input[type=tel],
.required.input-text input[type=email],
.required.input-text input[type=date], .required.input-textarea input[type=text],
.required.input-textarea input[type=password],
.required.input-textarea textarea,
.required.input-textarea input[type=tel],
.required.input-textarea input[type=email],
.required.input-textarea input[type=date], .required.input-toggle input[type=text],
.required.input-toggle input[type=password],
.required.input-toggle textarea,
.required.input-toggle input[type=tel],
.required.input-toggle input[type=email],
.required.input-toggle input[type=date], .required.input-select > div input[type=text],
.required.input-select > div input[type=password],
.required.input-select > div textarea,
.required.input-select > div input[type=tel],
.required.input-select > div input[type=email],
.required.input-select > div input[type=date], .required.input-row input[type=text],
.required.input-row input[type=password],
.required.input-row textarea,
.required.input-row input[type=tel],
.required.input-row input[type=email],
.required.input-row input[type=date], .required.legend input[type=text],
.required.legend input[type=password],
.required.legend textarea,
.required.legend input[type=tel],
.required.legend input[type=email],
.required.legend input[type=date] {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.input-calendar {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.input-calendar .input-calendar-wrapper {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

/* Body elements, part 2 */
html {
    background-color: #79838c;
}

body .ping-signin .ping-subtitle, body .ping-password .ping-subtitle {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

table.ping-tabular th:not(:last-child) {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
    font-weight: bold;
}

.details-tooltip > .details-content > .details-content-inner > .details-title {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

/* CBA Beacon Sans does not have a light variant */
.ping-header {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.password-requirements a {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.ping-buttons .ping-button {
    font-weight: bold;
}

.inline-message {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.identifier-first__account-item {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
    font-weight: bold;
}
.identifier-first__add-account {
    font-family: "CBA Beacon Sans", "helvetica", "Roboto", "Segoe UI", sans-serif;
}

.spinner {
    display: block;
    text-align: center;
    width: 75px;
    height: 75px;
    margin: 65px auto;
    border: 9px solid #e8ebed;
    border-radius: 50%;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.spinner__icon {
    position: absolute;
    border: 7px solid transparent;
    border-top-color: #2996cc;
    border-radius: 50%;
    width: 100%;
    height: 100%;
    -webkit-animation: spin .8s linear infinite;
    animation: spin .8s linear infinite;
    top: -9px;
    left: -9px;
    margin: 1px;
    padding: 1px
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn)
    }
}

.icon-feedback {
    color: #686f77;
    font-size: 28px;
    font-weight: 200;
    margin: 40px 0;
    text-align: center
}

.icon-feedback--success {
    color: #4aba78
}

.icon-feedback__label {
    margin: 0;
    color: #686f77;
    font-family: 'Helvetica Neue', 'helvetica', 'Roboto', 'Segoe UI', 'sans-serif';
}