@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('roboto.css');
}

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #f5f6fa;
    color: #171717;
    font-weight: normal;
    font-family: 'Roboto', sans-serif;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    font-size: 0.9em;
}


/* Theme layout styles */

#fullPage {
    width: 100%;
    height: 100%;
    display: flex;
}

#brandingWrapper {
    background-color: #F5F6FA;
    width: 55%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#branding {
    height: 630px;
    width: 560px;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#contentWrapper {
    position: relative;
    width: 45%;
    height: 100%;
    overflow: auto;
}

#content {
    min-height: 100%;
    height: auto !important;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header {
    display: none;
}

#bySelection {
    display: none!important;
}

#workArea {
    word-wrap: break-word;
    width: 450px;
}

#footerPlaceholder {
    display: none;
}

#footer {
    display: none;
}

#footerLinks {
    float: none;
    padding-top: 10px;
}

#copyright {
    display: none;
}

.pageLink {
    color: #000000;
    padding-left: 16px;
}

/* Common content styles */

.clear {
    clear: both;
}

.float {
    float: none;
}

.floatReverse {
    float: right;
}

.indent {
    margin-left: 16px;
}

.indentNonCollapsible {
    padding-left: 16px;
}

.hidden {
    display: none;
}

.notHidden {
    display: inherit;
}

.error {
    color: #c85305;
}

.actionLink {
    margin-bottom: 8px;
    display: block;
}

a {
    color: #2672ec;
    text-decoration: none;
    background-color: transparent;
}

ul {
    list-style-type: disc;
}

h1, h2, h3, h4, h5, label {
    margin-bottom: 8px;
}

.submitMargin {
    margin-top: 10px;
    margin-bottom: 30px;
}

.topFieldMargin {
    margin-top: 8px;
}

.fieldMargin {
    margin-bottom: 8px;
}

.groupMargin {
    margin-bottom: 30px;
}

.sectionMargin {
    margin-bottom: 64px;
}

.block {
    display: block;
}

.autoWidth {
    width: auto;
}

.fullWidth {
    width: 100%;
}

.fullWidthIndent {
    width: 326px;
}

input {
    max-width: 100%;
    font-family: inherit;
    margin-bottom: 8px;
}

    input[type="radio"], input[type="checkbox"] {
        vertical-align: middle;
        margin-bottom: 0px;
    }

    span.submit, input[type="submit"] {
        display: block;
        border-radius: 5px;
        background-color: #0064FF;
        box-sizing: border-box;
        min-width: 80px;
        width: 100%;
        padding: 8px 16px;
        transition: background 0s;
        color: rgb(255, 255, 255);
        cursor: pointer;
        margin-bottom: 30px;
        text-align: center;
        -ms-user-select: none;
        -moz-transition: background 0s;
        -webkit-transition: background 0s;
        -o-transition: background 0s;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

        input[type="submit"]:hover, span.submit:hover {
            background: rgb(212, 227, 251);
        }

    input.text {
        height: 40px;
        padding: 0px 15px 0px 15px;
        border: solid 1px #333333;
        border-radius: 5px;
        font-size: 14px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }

        input.text:focus {
            border: 1px solid #6B6B6B;
        }

select {
    height: 28px;
    min-width: 60px;
    max-width: 100%;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none;
    padding: 2px;
    font-family: inherit;
}

h1, .giantText {
    font-size: 2.0em;
    font-weight: lighter;
}

h2, .bigText {
    font-size: 1.33em;
    font-weight: lighter;
}

h3, .normalText {
    font-size: 1.0em;
    font-weight: normal;
}

h4, .smallText {
    font-size: 0.9em;
    font-weight: normal;
}

h5, .tinyText {
    font-size: 0.8em;
    font-weight: normal;
}

.hint {
    color: #999999;
}

.emphasis {
    font-weight: 700;
    color: #2F2F2F;
}

.smallIcon {
    height: 20px;
    padding-right: 12px;
    vertical-align: middle;
}

.largeIcon {
    height: 48px;
    vertical-align: middle;
}

.largeTextNoWrap {
    height: 48px;
    display: table-cell; /* needed when in float*/
    vertical-align: middle;
    white-space: nowrap;
    font-size: 1.2em;
}

.idp {
    height: 48px;
    clear: both;
    padding: 8px;
    display: flex;
}

    .idp:hover {
        background-color: #cccccc;
    }

.idpDescription {
    width: 80%;
}

@media only screen and (max-width: 1024px) {
    #brandingWrapper {
        display: none;
    }

    #contentWrapper {
        width: 100%;
    }
}

#loginArea {
    padding: 50px;
    border-radius: 5px;
    background: white;
}

#loginMessage {
    text-align: center;
    font-size: 16px;
}

#authArea {
    margin: 0;
}

#submitButton {
    font-size: 16px;
}

#titleMessage {
    font-size: 26px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 30px;
}

#logoPicture {
    height: 73px;
    margin-bottom: 30px;
    background: url('data:image/png;base64,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') no-repeat center;
}

#submissionArea a {
    color: #939393;
    text-decoration: none;
    width: 50%;
}

    #submissionArea a:hover {
        text-decoration: underline;
    }

#forgottenPasswordLink {
    float: left;
    text-align: left;
}

#firstConnexionLink {
    float: right;
    text-align: right;
}

@media only screen and (max-width: 480px) {

    #workArea {
        width: 370px;
    }

    #titleMessage {
        font-size: 19px;
        margin-bottom: 15px;
    }

    #forgottenPasswordLink, #firstConnexionLink {
        font-size: 13px;
    }

    #loginMessage {
        font-size: 14px;
    }

    body {
        background: #fff;
    }
}

@media only screen and (max-width: 320px) {

    #workArea {
        background: transparent;
        width: 320px;
    }

    #loginArea {
        padding: 30px
    }

    #forgottenPasswordLink, #firstConnexionLink {
        font-size: 11px;
    }
}