@font-face {
    font-family: "Pointsharp Bold";
    src: url('../fonts/pointsharp-bold-webfont.woff2') format('woff2'), url('../fonts/pointsharp-bold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Mono";
    src: url('../fonts/robotomono-regular-webfont.woff2') format('woff2'), url('../fonts/robotomono-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Mono";
    src: url('../fonts/robotomono-bold-webfont.woff2') format('woff2'), url('../fonts/robotomono-bold-webfont.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Roboto Mono";
    src: url('../fonts/robotomono-italic-webfont.woff2') format('woff2'), url('../fonts/robotomono-italic-webfont.woff') format('woff');
    font-style: italic;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    color: #000000;
    font-weight: normal;
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

body {
    font-size: 1.05em;
    background-color: #f4f7f8;
    background: url(../FormImages/stockholm.jpg) center center no-repeat fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover; /* Mozilla*/
    -o-background-size: cover; /* Opera*/
    background-size: cover; /* Generic*/
    margin: 0;
    padding: 0;
}

img {
    border: none;
}

p {
    margin-top: 0px;
    margin-bottom: 24px;
}

h1 {
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    color: #1d1f29;
    margin: 24px 0em;
    font-size: 68px;
    line-height: 75px;
}

h2 {
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    color: #1d1f29;
    margin: 24px 0em 24px 0em;
    font-size: 42px;
    line-height: 48px;
}

h3 {
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    color: #1d1f29;
    margin: 24px 0em 0em 0em;
    font-size: 26px;
    line-height: 48px;
}

a {
    color: #0047bb;
    text-decoration: none;
    font-weight: 600;
}

#background {
    display: table-cell;
    width: 100%;
}

#loginPage {
    /* Set Login frame center */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f4f7f8;
    /* Set size margins*/
    margin-bottom: 28px;
    margin-left: auto;
    margin-right: auto;
    min-height: 264px;
    min-width: 320px;
    max-width: 412px;
    width: 360px;
    height: auto;
    padding: 36px;
    /*Add drop shadow*/
    box-shadow: 0 2px 3px rgba(0,0,0,0.55);
    border: 1px solid rgba(0,0,0,0.4);
}

/* --- Top Empty/Text/Logo --- */
#top {
    font-size: 2em;
    font-weight: lighter;
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    padding: 0px 0px 20px 0px;
    margin: 0px;
    height: 56px;
    width: 338px;
    text-align: center;
    background-color: transparent;
}

#top img {
    width: auto;
    height: 100%;
    position: relative;
    top: -7px;
}   

/* Reply Message */

#reply-message {
    margin-bottom: 12px;
    position: relative;
}

#reply-message span {
    display: inline-block;
    width: 100%;
}

#reply-message span.error {
    color: #ff585d;
    background-color: transparent;
}

#reply-message span.instruction {
    background-color: transparent;
    padding-bottom: 0em;
    color: #1d1f29;
}

/* --- Login Content --- */
.mainContent {
    margin: 0px;
    padding: 0px;
}

/* Form */
.submit {
    text-align: right;
    padding-top: 12px;
    padding-bottom: 0px;
}
.form-content {
    position: relative;
}

    .form-content label {
        width: 100%;
        left: 50%;
        transform: translateY(12px) translateX(-50%);
        cursor: text;
        position: absolute;
        -webkit-transition: -webkit-transform .15s cubic-bezier(.47,.01,.11,.99);
        transition: -webkit-transform .15s cubic-bezier(.47,.01,.11,.99);
        transition: transform .15s cubic-bezier(.47,.01,.11,.99);
        transition: transform .15s cubic-bezier(.47,.01,.11,.99),-webkit-transform .15s cubic-bezier(.47,.01,.11,.99);
        pointer-events: none;
        font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
        font-weight: 600;
        color: #7d868c;
        font-style: normal;
        box-sizing: border-box;
        -webkit-box-direction: normal;
    }

    .form-content .form-item {
        padding-top: 12px;
        padding-bottom: 24px;
    }

input::-ms-clear {
    display: none;
}

/* Change Autocomplete styles in Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    background-color: #f4f7f8;
    -moz-box-shadow: 0px 0px 0px 100px #f4f7f8 inset;
    -webkit-box-shadow: 0px 0px 0px 100px #f4f7f8 inset;
    box-shadow: 0px 0px 0px 100px #f4f7f8 inset;
}

input[type=submit].submit-button, button.submit-button {
    border: none;
    text-decoration: none;
    padding: 8px 30px;
    line-height: 25px;
    display: inline-block;
    border-radius: 5px;
    transition: color .3s ease-in-out,background .3s ease-in-out;
    font-size: 16px;
    font-weight: 600;
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
    -webkit-appearance: button;
    cursor: pointer;
    text-transform: none;
    overflow: visible;
    margin: 0;
    box-sizing: border-box;
    align-items: flex-start;
    text-align: center;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-indent: 0px;
    text-shadow: none;
    -webkit-writing-mode: horizontal-tb;
    -webkit-box-direction: normal;
    min-width: 100px;
}

input[type=submit].green-button, button.green-button {
    background: #00c389;
    color: #f4f7f8;
}

input[type=submit].green-button:hover, button.green-button:hover {
    background: #0047bb;
}

input[type=text], input[type=password] {
    font-size: inherit;
    font-family: inherit;
    color: #1d1f29;
    font: inherit;
    box-sizing: border-box;
    -webkit-rtl-ordering: logical;
    user-select: text;
    cursor: auto;
    text-rendering: auto;
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none;
    text-indent: 0px;
    text-shadow: none;
    display: inline-block;
    text-align: inherit;
    -webkit-writing-mode: horizontal-tb;
    -webkit-box-direction: normal;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 40px;
    padding-top: 8px;
    line-height: 27px;
    -webkit-appearance: none;
    border-radius: 0;
    background: transparent;
    border: 0;
    resize: vertical;
    border-bottom: 2px solid #7d868c;
    transition: border .2s ease-in-out;
}

    input[type=text]:focus, input[type=password]:focus {
        outline: none;
    }

label.input-active {
    transform: translateY(-15px) translateX(-50%);
}

input[type=password] {
    font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
}

/* --- Small screen fix --- */
@media (max-width: 600px), (max-height: 392px) {
    body {
        background: none;
    }

    #loginPage {
        /* Set content to center */
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        background-color: #fff;
        /* Set size margins */
        margin-bottom: 28px;
        margin-left: auto;
        margin-right: auto;
        min-height: 290px;
        min-width: 320px;
        max-width: 412px;
        width: calc(100% - 40px);
        height: auto;
        padding: 23px 18px 0px 18px;
        /* Add drop shadow */
        box-shadow: 0 0 0 rgba(0,0,0,0);
        border: 0px solid rgba(0,0,0,0);
    }
}