﻿body {
    background: #512580;
    min-width: unset;
}

.mobile_view {
    display: none;
}

.page-header .container {
    font-size: 60pt;
    font-family: Montserrat-Medium;
    color: #ffffff;
    line-height: 200px;
    height: 200px;
    max-width: unset;
}

.page-header .logo a img {
    box-shadow: none;
    -webkit-box-shadow: none;
    width: 340px;
    height: 200px;
    margin: 0;
}

.page-footer {
    background-image: url('/Content/Images/login_background.png');
    background-position: right top;
    background-repeat: no-repeat;
    height: 190px;
    color: #ffffff;
    font-size: 16px;
    line-height: 30px;
}

    .page-footer > .container {
        padding: 0;
        padding-top: 35px;
        margin: 0;
        margin-left: 70px;
        max-width: unset;
        min-width: unset;
    }

    .page-footer > .container a {
        color: #ffffff;
        text-decoration: underline;
    }

        .page-footer > .container a:hover {
            text-decoration: none;
        }

.container-fluid-window {
    width: 100%;
    top: 48%;
    height: 500px;
    padding: 70px 50px;
}

body > .content {
    height: calc(100vh - 390px);
    min-height: 360px;
    background: #ffffff;
    position: relative;
}

    body > .content > .container-fluid {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        height: 360px;
        min-height: unset;
    }

h1 {
    font-size: 40px;
    text-align: center;
    margin: 20px 0px 35px 0px;
}

form {
    width: 420px;
    margin: 0 auto;
}

.container-fluid form .buttons {
    margin: 40px 0 20px 0;
    text-align: center;
}

dl.form dd {
    margin-bottom: 20px;
}

dl.form dt.inline-icon svg {
    width: 30px;
    height: 30px;
    margin: 10px 0 10px -50px;
    fill: none;
    stroke: #424242;
}

.container-fluid form .buttons .btn {
    width: 300px;
}

dl.form dt.inline-icon + dd input[type=text] {
    padding-left: 20px;
    font-size: 20px;
    -webkit-appearance: none; /* IPAD inner shadow */
}

dl.form input[type=text]::-webkit-input-placeholder { color: #444444; }
dl.form input[type=text]::-moz-placeholder          { color: #444444; opacity: 1; }
dl.form input[type=text]:-moz-placeholder           { color: #444444; opacity: 1; }
dl.form input[type=text]:-ms-input-placeholder      { color: #444444; }

dl.form dt.inline-icon + dd input[type=password] {
    padding-left: 20px;
    font-size: 20px;
    -webkit-appearance: none; /* IPAD inner shadow */
}

dl.form input[type=password]::-webkit-input-placeholder { color: #444444; }
dl.form input[type=password]::-moz-placeholder          { color: #444444; opacity: 1; }
dl.form input[type=password]:-moz-placeholder           { color: #444444; opacity: 1; }
dl.form input[type=password]:-ms-input-placeholder      { color: #444444; }

@media (max-width: 1000px) {
    .page-header .container {
        font-size: 36pt;
        line-height: 92px;
        height: 92px;
    }

    .page-header .logo a img {
        width: 340px;
        height: 155px;
        top: -32px;
        left: -74px;
        position: relative;
    }

    body > .content {
        height: calc(100vh - 184px);
        min-height: 300px;
    }

    body > .content > .container-fluid{
        height: 300px;
    }

    .container {
        min-width: unset;
    }

    h1 {
        font-size: 22px;
        text-align: center;
        margin: 57px 0px 18px 0px;
    }

    form {
        width: 240px;
        margin: 0 auto;
    }

    dl.form dt.inline-icon + dd input[type=password],
    dl.form dt.inline-icon + dd input[type=text] {
        height: 30px;
        font-size: 12px;
        padding: 8px 5px;
    }

    dl.form dt.inline-icon svg {
        width: 18px;
        height: 18px;
        margin: 5px 0 5px -31px;
    }

    dl.form dd {
        margin-bottom: 11px;
    }

    .page-footer {
        height: 92px;
        font-size: 9.6px;
        line-height: 12px;
        background-size: cover;
    }

    .container-fluid form .buttons {
        margin: 25px 0 20px 0;
        text-align: center;
    }

    .container-fluid form .buttons .btn {
        width: 180px;
        min-width: 180px;
        height: 30px;
        font-size: 7.2px;
        padding: 0 35px 0 35px;
    }

    .page-footer > .container {
        padding-top: 26px;
        margin-left: 45px;
    }
}

@media (max-width: 767px) {
    .desktop_tablet_view {
        display: none !important;
    }

    .mobile_view {
        display: block !important;
    }

    body > .content {
        height: calc(100vh - 184px);
        min-height: 500px;
    }

    body > .content > .container-fluid {
        height: 500px;
    }

    .page-header .container {
        line-height: 143px;
        height: 143px;
        margin: 0;
        padding: 0;
    }

    .page-header .logo a {
        margin-left: 0;
    }

    .page-header .logo a img {
        width: 340px;
        height: 210px;
        position: absolute;
        top: -34px;
        left: 50%;
        margin-left: -170px;
    }

    h1 {
        font-size: 32px;
        margin: 49px 0px 24px 0px;
    }

    form {
        width: 320px;
    }

    dl.form dt.inline-icon + dd input[type=password],
    dl.form dt.inline-icon + dd input[type=text] {
        height: 40px;
        font-size: 16px;
        padding: 10px 20px;
    }

    dl.form dd {
        margin-bottom: 16px;
    }

    .container-fluid form .buttons {
        margin: 28px 0 102px 0;
    }

    .container-fluid form .buttons .btn {
        width: 280px;
        min-width: 280px;
        height: 46px;
        font-size: 11px;
    }

    dl.form dt.inline-icon svg {
        width: 24px;
        height: 24px;
        margin: 8px 0 8px -40px;
    }

    .links {
        font-size: 14.9px;
        margin-left: -40px;
    }

    .links a{
        color: #454545;
    }

    .links a:hover{
        color: #18858a;
    }

    .page-footer {
        height: 105px;
    }
}