:root {
    /* Colour Palette */
    --of-font: 100% 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font size and family */
    --of-fontfamily: 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font family */
    --of-grey100: #F5F8FA;
    --of-grey200: #E2E8EB;
    --of-grey300: #D0D7DD; /* white at 80% opacity over --of-primary500*/
    --of-grey400: #8B97A6;
    --of-grey500: #506274; /*white at 10% opacity over --of-grey700*/
    --of-grey600: #46596C; /*white at 5% opacity over --of-grey700*/
    --of-grey700: #3C5064; /*dsg app menu colour*/
    --of-grey800: #334455; /*black at 15% opacity over --of-grey700*/
    --of-grey900: #1A2127; /* Grid header, ofParagraph text colour */
    --of-primary300: #537491; /*white at 28% opacity over --of-primary500 */
    --of-primary400: #335B7D; /*white at 14% opacity over --of-primary500 */
    --of-primary500: #134169; /*dsg header colour*/
    --of-secondary100: #DEEEF7;
    --of-secondary200: #1F8DC8; /* white at a 12% opacity over --of-secondary400 */
    --of-secondary300: #1487C5; /* white at a 8% opacity over --of-secondary400 */
    --of-secondary400: #007DC0;
    --of-secondary500: #006EA9;
    --of-accent100: #D9F2FF; /* Used for secondary button pressed/click animation */
    --of-accent300: #66CCFF;
    --of-accent400: #00AAFF;
    --of-green300: #77BB00;
    --of-green400: #00773C;
    --of-red300: #FF4400;
    --of-red400: #C23400;
    --of-purple300: #6C42F5;
    --of-purple400: #492DA7;
    --of-gold300: #FAC823;
    --of-gold400: #FA9F23;
    --of-white500: #FFFFFF;
    --of-wizardgrey: #ECF1F4;
    /* Status Colours */
    --of-success: var(--of-green300);
    --of-warning: var(--of-gold400);
    --of-error: var(--of-red400);
    --of-info: var(--of-accent400);
}

html {
    height: 100vh;
    width: 100vw;
    background: var(--of-white500);
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: var(--of-white500) !important;
    font-family: "Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    font-size: 12px;
}

form {
    height: 100%;
}

input {
    outline: none;
}

    input[type=text], input[type=password] {
        width: 200px;
        height: 30px;
        font-size: 14px;
        border-radius: 2px;
        border-width: 0.5px;
        border-style: solid;
        padding-left: 5px;
        padding-right: 5px;
        color: var(--of-grey900);
    }

    input[type=submit] {
        width: 210px;
        height: 36px;
        box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
        font-size: 14px;
        font-weight: bold;
        border-width: 0;
        border-radius: 4px;
        /*border-color: #e65a1c; /*SmartAanalysis orange*/
        border-color: var(--of-secondary400);
        color: #FFFFFF;
        /*background: #e65a1c;*/
        background: var(--of-secondary400);
        cursor: pointer;
        padding: 0px 20px;
        letter-spacing: 1px;
        line-height: 19px;
    }

        input[type=submit]:hover {
            background: var(--of-secondary300);
            border-color: var(--of-secondary300);
        }

a {
    color: var(--of-primary500) !important;
}

    a:visited {
        color: var(--of-primary500) !important;
    }

/**********************************************************************/
/**********************************************************************/

.pageContainer {
    display:flex;
    flex-direction: column;
    height: 100%;
}


.contentContainer {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow:auto;
}

.centralContent {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
}

.centralContentInner {
    display: flex;
    justify-content: center;
}

.centralContentInnerLeft {
    padding-right: 50px;
    text-align: justify;
    max-width: 500px;
}

.centralContentInnerRight {
    max-width: 250px;
}

.contentTitle{
    padding-bottom: 15px;
}

.productLogo img {
    height: 70px;
}

.inputContainer {
    padding-top: 15px;
}

    .inputContainer label {
        display: block;
        margin-bottom: 4px;
        color: var(--of-grey700);
        font-weight: 500;
        letter-spacing: 0.1px;
    }

.alertMessage {
    color: black;
    font-size: 14px;
    font-weight: bold;
    margin: 10px;
}

.alertMessage div {
    background-color: #FFF;
    padding: 10px;
    border-radius: 3px;
    border: 0.5px solid #e72025;
}

.TandCContainer {
    font-size: 10px;
}


/**********************************************************************/
/**********************************************************************/
/************************** footer ********************************/


.footerContainer {
    font-size: 10px;
    text-align: center;
    padding-bottom: 10px;
}


/**********************************************************************/
/* ConfirmDialog.ascx
    Confirm dialog classes - copied from Aardvark2010.css and modified. Chnaging them in Aardvark2010.css hits too many parts
    of the site, so we'll come back to it later
*/
/**********************************************************************/

.modalBackground {
    background-color: Gray;
    filter: alpha(opacity=50);
    opacity: 0.50;
    z-index: 19999!important;
}

.confirm {
    clear: left;
    float: left;
    width: 500px;
    background-color: #FFFFFF;
    height: auto;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
}

.confirmWide {
    clear: left;
    float: left;
    width: 600px;
    background-color: #FFFFFF;
    height: auto;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
}

.confirmVeryWide {
    clear: left;
    float: left;
    width: 660px;
    background-color: #FFFFFF;
    height: auto;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
}

.confirmImageContainer {
    clear: left;
    float: left;
    width: 32px;
    margin-top: 20px;
    margin-left: 10px;
}

.confirmImage {
    clear: left;
    float: left;
    width: 32px;
    height: 32px;
}

.confirmMessage {
    float: left;
    width: 420px;
    font-size: 12px;
    margin-left: 15px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.confirmMessageWide {
    float: left;
    width: 520px;
    font-size: 12px;
    margin-left: 15px;
    margin-top: 15px;
}

.confirmMessageVeryWide {
    float: left;
    width: 580px;
    font-size: 12px;
    margin-left: 15px;
    margin-top: 15px;
}

.confirmTitle {
    vertical-align: middle;
    text-align: center;
    width: 100%;
    font-weight: bold;
    font-size: 20px;
    color: var(--of-primary500);
    padding-top: 10px;
}

.confirmDlgButtonContainer {
    clear: left;
    float: left;
    height: 32px;
    margin-top: 35px;
    margin-left: 8px;
    width: 480px;
}

.confirmDlgButton {
    float: right;
    margin-bottom: 5px;
    margin-top: 10px;
    margin-right: 5px;
    width: 80px !important;
    margin-right: 4px;
    color: white;
    background-color:#e65a1c;
    border: solid 1px #e65a1c;
    border-radius: 3px;
    cursor: pointer;
}

.confirmDlgButton[disabled] {
    color: black;
    background-color: lightgrey;
    border: solid 1px silver;
}