:root {
    /* pass & fail colours */
    --fail-colour: #b40606;
    --fail-rgb-colour: 180, 6, 6; /* #B40606 */
    --fail-input-bg-colour: rgba(var(--fail-rgb-colour), 0.1);
    --fail-bg-colour: rgb(var(--fail-rgb-colour));
    --fail-input-text-colour: #b50606;
    --fail-text-colour: #fff;
    --fail-box-shadow-colour: rgba(150, 70, 10, 0.8);
    --fail-border-colour: #e4d0c1;

    --pass-colour: #e5fcf1;
    --pass-rgb-colour: 229, 252, 241; /* #E5FCF1 */
    --pass-input-bg-colour: rgb(var(--pass-rgb-colour));
    --pass-bg-colour: rgb(var(--pass-rgb-colour));
    --pass-input-text-colour: #007f00;
    --pass-text-colour: #fff;
    --pass-box-shadow-colour: rgba(120, 243, 183);
    --pass-border-colour: #007f00;

    --fail-hover-rbg-colour: 142, 0, 0; /* #8E0000 */
    --fail-hover-bg-colour: rgb(var(--fail-hover-rbg-colour));
    --fail-focus-bg-colour: rgba(200, 90, 15, 0.1);
    --fail-focus-text-colour: rgb(40, 0, 0);
    --fail-focus-box-shadow-colour: rgba(200, 90, 15, 0.8);
    --fail-focus-border-colour: #b40606;

    --pass-focus-bg-colour: rgba(15, 250, 150, 0.1);
    --pass-focus-text-colour: rgb(0, 50, 0);
    --pass-focus-box-shadow-colour: rgba(15, 250, 150, 0.8);
    --pass-focus-border-colour: #60b406;

    --target-rgb-colour: 37, 131, 254;
    --proshop-grey: #d3dde9;

    /* Table colours */
    --row-identifier: #f0f0f0; /*  Grayed color row  */
    --table-form-subtle-bg-colour: #f2f9ff;
    --row-active-table: #e8f4ff; /*  Used as row hover colour too  */
    --row-active-colour: #d2e9ff;
    --row-grouping: #485461;

    /* date & time picker variables */
    --dtp-theme-colour: var(--proshop-gre, #a3afbc);

    /* font vars */
    --font-family-title: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-family-base: 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-weight-thin: 100;
    --font-weight-xlight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-xbold: 800;
    --font-weight-black: 900;

    --font-weight-base: var(--font-weight-normal, 400);
    --font-weight-title: var(--font-weight-medium, 500);

    --font-size-title: 2.2142857142857144rem;
    --font-size-subtitle: 1.7857142857142858rem;

    /* transition vars */
    --transition-duration: 0.2s;

    /* dropdown vars */
    --dropdown-bg-colour: #fff;
    --dropdown-padding: 1.75em;

    /* breakpoints */
    --xs-screen: 320;
    --sm-screen: 576;
    --md-screen: 768;
    --lg-screen: 992;
    --xl-screen: 1200;
    --xxl-screen: 1400;
    --hd-screen: 1920;
    --2k-screen: 2560;
    --uhd-screen: 3840;
    --4k-screen: 4096;
    /* with pix */
    --xs-screen-px: calc(var(--xs-screen, 320) * 1px);
    --sm-screen-px: calc(var(--sm-screen, 576) * 1px);
    --md-screen-px: calc(var(--md-screen, 768) * 1px);
    --lg-screen-px: calc(var(--lg-screen, 992) * 1px);
    --xl-screen-px: calc(var(--xl-screen, 1200) * 1px);
    --xxl-screen-px: calc(var(--xxl-screen, 1400) * 1px);
    --hd-screen-px: calc(var(--hd-screen, 1920) * 1px);
    --2k-screen-px: calc(var(--2k-screen, 2560) * 1px);
    --uhd-screen-px: calc(var(--uhd-screen, 3840) * 1px);
    --4k-screen-px: calc(var(--4k-screen, 4096) * 1px);

    --default-padding: 1rem;
    --screen-edge-padding: calc(var(--default-padding, 1rem) * 1.5);

    --default-background-colour: #ffffff;
    --background-colour: #fefeff;
    --widget-background-colour: #f0f0f0;
    --adion-active-tab-background-colour: #0d3b66;
    --adion-active-tab-text-colour: #f7fafc;
    --adion-banner-background-color: #000e26;

    --default-text-colour: #363736;
    --text-colour: #363736;
    --adion-link-colour: #1767b2;
    --adion-link-hover-colour: #1d85e5;
    --adion-border-separator-colour: #d1dee4;
    --disabled-text-colour: #676767;

    /* button and link styles */
    --btn-raised-bg-colour: #dadada;
    --btn-raised-text-colour: #000000;
    --btn-raised-hover-bg-colour: #a7a7a7;

    --btn-primary-bg-colour: #fefeff;
    --btn-primary-text-colour: #135899;

    --btn-secondary-bg-colour: #061d33;
    --btn-secondary-text-colour: #ffffff;
    --btn-secondary-hover-bg-colour: #395066;

    --btn-disabled-bg-colour: #bfbfbf;

    --btn-font-size: 0.9em;
    --btn-border-radius: 0.1875rem;
    --btn-padding: 0.4em 1em;
    --btn-font-weight: var(--font-weight-medium, 500);
    --btn-line-height: normal;
    --btn-alt-bg-colour: #1767b2;
    --btn-alt-hover-bg-colour: #00418c;

    /* Radio button styles */
    --radio-ring-colour: #0d3b66;
    --radio-checked-colour: #0d3b66;
    --btn-regular-border-colour: #9db8c7;

    /* Radio button styles */
    --radio-button-colour: #0d3b66;
    --radio-button-focus-colour: #73a1cc;

    --main-header-height: var(
        --main-header-mobile-height,
        2.5928571428571425rem
    );
    --default-header-height: var(--main-header-height, 2.5928571428571425rem);

    --adion-overlay-colour: rgba(0, 0, 0, 0.125);
    --page-title-height: 0px;
    --main-nav-height: 0px;
    --quicklinks-height: 0px;
}

@font-face {
    font-family: RobotoMedium;
    src: url(../fonts/Roboto/Roboto-Medium.ttf);
}

@font-face {
    font-family: RobotoRegular;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}

@font-face {
    font-family: RobotoBold;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}

p {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    position: absolute;
}

.page-wrapper {
    width: 100%;
    height: 100%;
}

.adion-banner {
    background-color: var(--adion-banner-background-color);
    width: 100%;
    height: 13.5rem;
    display: flex;
}

.center-page {
    background: #f0f0f2 0% 0% no-repeat padding-box;
    opacity: 1;
    min-height: calc(100vh - 13.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-card {
    background: #ffffff 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 6px #00000029;
    opacity: 1;
    width: 50.5rem;
    margin: 3rem;
    padding: 2rem;
}

.proshop-logo-img {
    height: 9.875rem;
    width: 37rem;
    margin: auto;
}

.btn.btn-raised:not(.btn-link),
.btn-group-raised .btn:not(.btn-link) {
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 20%),
        0 1px 5px 0 rgb(0 0 0 / 12%);
}

.btn.btn-raised.btn-secondary:not(.btn-link):hover,
.btn.btn-raised.btn-secondary:not(.btn-link):focus {
    background-color: var(--btn-secondary-hover-bg-colour);
    cursor: pointer;
}

.btn.btn-secondary:not(.btn-link):hover,
.btn.btn-secondary:not(.btn-link):focus {
    background-color: var(--btn-secondary-hover-bg-colour);
    color: var(--btn-secondary-hover-colour, #fff);
    outline-offset: 0;
}

.custom-views-copyright-text {
    text-align: center;
    font: normal normal normal 16px/66px RobotoMedium;
    letter-spacing: 0px;
    color: #092c4c;
    opacity: 1;
}

.custom-views-error-msg-wrapper {
    width: 41.625rem;
    height: 2.25rem;
    background: #b406060f 0% 0% no-repeat padding-box;
    margin: auto;
    max-width: 100%;
}

.custom-views-error-msg-wrapper p {
    color: var(--fail-colour);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font: normal normal normal 20px/23px RobotoMedium;
    letter-spacing: 0px;
}

.custom-views-error-msg-wrapper p span {
    position: relative;
    bottom: 3px;
    right: 5px;
    margin-left: 0;
}

.custom-views-title {
    text-align: center;
    font: normal normal var(--font-weight-medium) 36px/56px RobotoMedium;
    letter-spacing: 0px;
    color: #092c4cde;
    opacity: 1;
}

.custom-views-enter-cred {
    text-align: center;
    font: normal normal var(--font-weight-medium) 20px/66px RobotoRegular;
    letter-spacing: 0px;
    color: #092c4c;
    opacity: 1;
    margin: 0.25em;
}

.custom-views-login-box {
    width: 41.25rem;
    margin: auto;
}

.custom-views-login-username,
.custom-views-login-password {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-views-login-username label,
.custom-views-login-password label {
    font: normal normal normal 16px/66px RobotoRegular;
    letter-spacing: 0px;
    color: #092c4c;
    opacity: 1;
}

.custom-views-login-username input,
.custom-views-login-password input {
    width: 25.813rem;
    height: 2.125rem;
    background: #ffffff 0% 0% no-repeat padding-box;
    border: 1px solid #9db8c7;
    border-radius: 3px;
    opacity: 1;
    padding-left: 0.5rem;
    font: normal normal normal 16px/66px RobotoRegular;
}

.custom-views-login-username input::-webkit-input-placeholder {
    font: normal normal normal 16px/66px RobotoRegular;
    letter-spacing: 0px;
    color: #9c9c9c;
    opacity: 1;
    margin-left: 0.313rem;
}

.custom-views-login-username input::-moz-placeholder {
    font: normal normal normal 16px/66px RobotoRegular;
    letter-spacing: 0px;
    color: #9c9c9c;
    opacity: 1;
    margin-left: 0.313rem;
}

.input-icon {
    margin-left: -1.563rem;
    margin-top: 0.5rem;
    z-index: 2;
    position: absolute;
}

.custom-views-login-btn-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-top: 1.25rem;
}

.custom-views-login-btn-wrapper button {
    width: 5.375rem;
    height: 2.5rem;
    background: var(--btn-secondary-bg-colour) 0% 0% no-repeat padding-box;
    border: 1px solid var(--btn-secondary-bg-colour);
    border-radius: 3px;
    opacity: 1;
    text-align: center;
    font: normal normal normal 20px/24px RobotoBold;
    letter-spacing: 0px;
    color: #ffffff;
    text-transform: uppercase;
}

.custom-views-login-separator {
    display: flex;
    width: 100%;
    justify-content: center;
    padding: 1.5rem;
}

.custom-views-login-separator div {
    width: 35%;
    height: 0;
    border-top: 2px solid lightgrey;
    margin-top: 0.563rem;
}

.custom-views-login-separator p {
    width: 15%;
    text-align: center;
    font: normal normal normal 20px/20px RobotoBold;
    letter-spacing: 0px;
    color: #092c4c;
    opacity: 1;
}

.custom-views-sign-in-svg-wrapper img {
    width: 14.75rem;
    height: 2.813rem;
}

.custom-views-oauth-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}

/* For Tablet */
@media screen and (max-width: 992px) {
    .adion-banner {
        height: 11.313rem;
    }

    .auth-card {
        width: 43.125rem;
        margin: 2rem;
        max-width: 100vw;
        padding: 2rem 0.5rem;
    }

    .center-page {
        min-height: calc(100vh - 11.313rem);
    }

    .custom-views-copyright-text {
        font-size: 12px;
    }

    .custom-views-error-msg-wrapper {
        width: 39.375rem;
        height: 2.188rem;
    }

    .custom-views-error-msg-wrapper p {
        font: normal normal normal 16px/23px RobotoMedium;
    }

    .custom-views-error-msg-wrapper p span {
        position: relative;
        bottom: 4px;
        right: 4px;
    }

    .custom-views-enter-cred {
        font: normal normal normal 19px/61px RobotoRegular;
    }

    .custom-views-login-box {
        width: 35rem;
    }

    .custom-views-login-username input,
    .custom-views-login-password input {
        width: 25.125rem;
        height: 2rem;
    }

    .custom-views-title {
        font: normal normal var(--font-weight-medium) 33px/51px RobotoMedium;
    }

    .proshop-logo-img {
        height: 6.75rem;
        width: 25.375rem;
    }

    .custom-views-login-btn-wrapper {
        height: 13.125rem;
        margin-top: 1rem;
    }

    .custom-views-login-btn-wrapper button {
        width: 4.625rem;
        height: 2.063rem;
        font: normal normal bold 16px/19px RobotoBold;
    }

    .custom-views-sign-in-svg-wrapper img {
        width: 13.563rem;
        height: 2.563rem;
    }
}
/* For Mobile */
@media screen and (max-width: 576px) {
    .adion-banner {
        height: 6.25rem;
    }

    .auth-card {
        width: 80vw;
        margin: 1rem;
        padding: 1rem;
    }

    .center-page {
        min-height: calc(100vh - 6.25rem);
    }

    .custom-views-copyright-text {
        font-size: 8px;
    }

    .custom-views-error-msg-wrapper {
        width: 17.875rem;
        height: 2.25rem;
    }

    .custom-views-error-msg-wrapper p {
        font: normal normal normal 12px/23px RobotoMedium;
        padding-left: 1rem;
    }

    .custom-views-error-msg-wrapper p span {
        position: relative;
        bottom: 4px;
        right: 4px;
        font-size: 20px;
    }

    .custom-views-enter-cred {
        font: normal normal var(--font-weight-medium) 13px/21px RobotoRegular;
    }

    .custom-views-login-username input::-moz-placeholder {
        font: normal normal normal 13px/66px RobotoRegular;
    }

    .custom-views-login-box {
        width: 16.75rem;
    }

    .custom-views-login-username,
    .custom-views-login-password {
        flex-direction: column;
        align-items: initial;
    }

    .custom-views-login-username label,
    .custom-views-login-password label {
        font: normal normal normal 13px/66px RobotoRegular;
        height: 2.188rem;
        position: relative;
        top: -1rem;
    }

    .custom-views-login-username input,
    .custom-views-login-password input {
        width: 16.75rem;
        height: 1.5rem;
        font: normal normal normal 13px/66px RobotoRegular;
    }

    .custom-views-login-username input::-webkit-input-placeholder {
        font: normal normal normal 13px/66px RobotoRegular;
    }

    .custom-views-title {
        font: normal normal var(--font-weight-medium) 24px/54px RobotoMedium;
    }

    .input-icon {
        margin-top: 0.313rem;
    }

    .proshop-logo-img {
        height: 4.063rem;
        width: 15.25rem;
    }

    .custom-views-login-separator p {
        font: normal normal normal 14px/14px RobotoBold;
    }

    .custom-views-login-btn-wrapper {
        height: 11.875rem;
        margin-top: 0.625rem;
    }

    .custom-views-login-btn-wrapper button {
        width: 4.25rem;
        height: 2rem;
        font: normal normal normal 14px/17px RobotoBold;
    }

    .custom-views-sign-in-svg-wrapper img {
        width: 9.875rem;
        height: 1.875rem;
    }
}