﻿html {
    display: table;
    margin: auto;
}

body {
    color: #B1B9BC;
    display: table-cell;
    font-size: 14pt;
    vertical-align: middle;
    width: 345px;
}

html, body {
    height: 100%;
}

body, button, h1, input {
    font-family: 'HelveticaNeue-Light', 'Arial';
}

button, h1, input {
    font-size: 100%;
}

h1 {
    font-weight: normal;
}

    h1 span {
        font-family: 'HelveticaNeue', 'Arial';
        font-weight: bold;
        font-weight: normal;
    }

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

p.smalllinebreak {
    line-height: .8;
}

div.errorBox {
    background-color: #E2492A;
    background-image: url(/Content/ErrorIcon.png);
    background-origin: content-box;
    background-position: left center;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-family: 'HelveticaNeue-Light', 'Arial';
    margin: 0 0 22px 0;
    padding: 15px;
    text-align: left;
}

@media only screen (-webkit-min-device-pixel-ratio: 2) {
    div.errorBox {
        background-image: url(/Content/ErrorIcon@2x.png);
        background-size: 37px 37px;
    }
}

div.errorBox p {
    margin: 0 0 0 50px
}

div.warningMessage p {
    background-color: #FFCC00;
    border: 0;
    border-radius: 5px;
    color: #6B6E73;
    font-family: 'HelveticaNeue-Light', 'Arial';
    margin: 0 0 22px 0;
    padding: 15px;
    text-align: left;
}

small {
    font-size: 60%;
}

ul {
    list-style: none;
    padding-left: 0;
}

    ul li {
        padding: 10px 0 10px 0;
    }

.googleColour {
    color: #E2492A;
}

.microsoftColour {
    color: #0170C9;
}

.office365Colour {
    color: #EE3900;
}

.slimwrap {
    width: 80%
}

.formField input {
    -webkit-appearance: none;
    background-color: #F2F6F7;
    border: 0;
    border-radius: 0;
    height: 40px;
    margin: 0 0 22px 0;
    padding-left: 8px;
    width: 337px;
}

div.dateDropDown {
    -webkit-appearance: none;
    background-color: #F2F6F7;
    border: 0;
    border-radius: 0;
    height: 75px;
    margin: 0 0 0 0;
    width: 100%;
    padding: 8px 0;
}

.dateLabel {
    -webkit-appearance: none;
    display: inline-block;
    vertical-align: middle;
    font-family: HelveticaNeue-Light, Arial;
    font-size: 100%;
    color: black;
    padding: 8px 0;
    padding-left: 8px;
}

.dateSelectTable {
    -webkit-appearance: none;
    height: 32px;
    width: 33%;
}

.dropDownDate {
    -webkit-appearance: none;
    height: 32px;
    width: 32%;
}

.btn {
    -webkit-appearance: none;
    background-origin: content-box;
    background-position: left center;
    background-repeat: no-repeat;
    border: 0;
    border-radius: 5px;
    color: #ffffff;
    font-family: 'HelveticaNeue-Light', 'Arial';
    padding: 15px;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

    .btn span {
        margin: 0 0 0 40px;
    }

    .btn.standard {
        background-color: #007FA8;
        text-align: center;
    }


    .btn.Google {
        background-color: #E2492A;
        background-image: url(/Content/GoogleIcon.png);
    }

@media only screen (-webkit-min-device-pixel-ratio: 2) {
    .btn.Google {
        background-image: url(/Content/GoogleIcon@2x.png);
        background-size: 15px 23px;
    }
}

.btn.Microsoft {
    background-color: #0170C9;
    background-image: url(/Content/WindowsIcon.png);
}

@media only screen (-webkit-min-device-pixel-ratio: 2) {
    .btn.Microsoft {
        background-image: url(/Content/WindowsIcon@2x.png);
        background-size: 15px 17px;
    }
}

.btn.OpenIdConnect {
    background-color: #EE3900;
    background-image: url(/Content/Office365Icon.png);
}

@media only screen (-webkit-min-device-pixel-ratio: 2) {
    .btn.OpenIdConnect {
        background-image: url(/Content/Office365Icon@2x.png);
        background-size: 15px 18px;
    }
}

.btn.Apple {
    background-color: #000000;
    background-image: url(/Content/AppleIcon.png);
}

@media only screen (-webkit-min-device-pixel-ratio: 2) {
    .btn.Apple {
        background-image: url(/Content/AppleIcon@2x.png);
        background-size: 15px 19px;
    }
}
