html {
    font-family: "Barlow", Verdana, Helvetica, Arial, sans-serif;
    font-size: 16px;
    height: 100%;
}

* {
    box-sizing: border-box;
}

body{
    background-attachment:fixed;
    background-image: url(/resources/login/win_bg.jpg);
    background-position: left top;
    background-repeat: no-repeat;
    margin:0;
    padding:0;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    height: 100%;
}

.page {
    display: flex;
    align-items: center;
    flex-flow: column;
    height: 100%;
}

img.logo {
    position: absolute;
    left: 2rem;
    top: 2rem;
}

a.backToHome {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 500;
    border: 1px solid #ffffff;
    line-height: calc(50px - 2rem);
    border-radius: 25px;
    padding: 1rem;
    cursor: pointer;
    text-decoration:none;

    position: absolute;
    right: 2rem;
    top: 2.3rem;
}

a.backToHome:hover {
    color: #1CD3AF;
    border-color: #1CD3AF;
}

.form {
    background: white;
    width: 420px;
    margin: auto;
    display: flex;
    flex-flow: column;
    flex-wrap: nowrap;
    align-items: center;
    font-size: 1rem;
    padding: 1rem 2rem;
    -webkit-box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.12);
    -moz-box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.12);
    box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.12);
    justify-content: space-between;
    z-index: 1;
    gap: 0.4rem;
}

.login.form {
    min-height: 360px;
}

.reset.form {
    min-height: 300px;
    width: 480px;
}

@media screen and (max-width: 450px) {
    .backToHome {
        display:none;
    }

    .form {
        width: auto;
        max-width: 400px;
    }
}


.productName {
    font-size: 2rem;
    font-weight: 700;
    color: #063A83; /*odyssey-blue*/
}

.signInMsg {
    font-size: 1rem;
    font-weight: 400;
    color: #1B2537;
}

.formMsg {
    text-align: center;
}

.formMsg.error {
    color: #C64535;
}

.formMsg.warning {
    /*background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDQiIGhlaWdodD0iNDQiIHZpZXdCb3g9IjAgMCA0NCA0NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8Y2lyY2xlIGN4PSIyMiIgY3k9IjIyIiByPSIyMiIgZmlsbD0iI0ZBREY3RSIvPg0KICAgIDxwYXRoIGQ9Ik0yMy44OTcxIDEwLjk4MDNMMjMuNjkxOSAyNi4wODgySDIxLjMxMDdMMjEuMTA1NCAxMC45ODAzSDIzLjg5NzFaTTIyLjUwMTMgMzIuMTY0MkMyMS45OTQ5IDMyLjE2NDIgMjEuNTYwNSAzMS45ODI5IDIxLjE5NzggMzEuNjIwMkMyMC44MzUyIDMxLjI1NzYgMjAuNjUzOCAzMC44MjMxIDIwLjY1MzggMzAuMzE2OEMyMC42NTM4IDI5LjgxMDQgMjAuODM1MiAyOS4zNzYgMjEuMTk3OCAyOS4wMTMzQzIxLjU2MDUgMjguNjUwNyAyMS45OTQ5IDI4LjQ2OTMgMjIuNTAxMyAyOC40NjkzQzIzLjAwNzYgMjguNDY5MyAyMy40NDIxIDI4LjY1MDcgMjMuODA0OCAyOS4wMTMzQzI0LjE2NzQgMjkuMzc2IDI0LjM0ODcgMjkuODEwNCAyNC4zNDg3IDMwLjMxNjhDMjQuMzQ4NyAzMC42NTIxIDI0LjI2MzIgMzAuOTYgMjQuMDkyMSAzMS4yNDA1QzIzLjkyNzkgMzEuNTIxIDIzLjcwNTUgMzEuNzQ2OCAyMy40MjUgMzEuOTE3OUMyMy4xNTEzIDMyLjA4MjEgMjIuODQzNCAzMi4xNjQyIDIyLjUwMTMgMzIuMTY0MloiIGZpbGw9IiMwMDAiLz4NCjwvc3ZnPg0K);
    background-repeat: no-repeat;
    background-size: 1.5rem 1.5rem;
    padding-left: 2rem;*/
    line-height: 1.5rem;
    font-weight: 500;
    color: #C64535;
}

.formMsg span[title] {
    margin-left: 0.3rem;
    font-size: 13px;
    line-height: 13px;
    padding: 2px;
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 17px;
    background: rgba(198,69, 53, 0.7);/*#063A83;*/
    color:#ffffff;
}

.formMsg li {
    text-align:left;
    font-size:0.9rem;
}

.form input {
    height: 45px;
    background: #ffffff;
    border-radius: 25px;
    border: 2px solid #E8E9EB;/*#EDF2F7;*/
    font-size: 1rem;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: #1B2537;
    outline: none;
    display:block;
    width: 100%;
}

.form input:-webkit-autofill::first-line {
    font-family: "Barlow", Verdana, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    color: #1B2537;
}

.form input::placeholder {
    color: #1B2537;
    opacity: 50%;
}

.form input:focus {
    border-color: #063A83;
}

.form .username, .form .password {
    display: block;
    position: relative;
    align-self: stretch;
}

.form .username::after, .form .password::after {
    content: '';
    display: block;
    width: 1.3rem;
    height: 1.3rem;
    position: absolute;
    top: 0.7rem;
    left: 0.7rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.form .username::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzciIGhlaWdodD0iMzciIHZpZXdCb3g9IjAgMCAzNyAzNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMjIuODE4NCA2LjQzNzAyQzI1LjIxNDUgOC44MzMwMyAyNS4yMTQ1IDEyLjcxNzcgMjIuODE4NCAxNS4xMTM3QzIwLjQyMjQgMTcuNTA5NyAxNi41Mzc3IDE3LjUwOTcgMTQuMTQxNyAxNS4xMTM3QzExLjc0NTcgMTIuNzE3NyAxMS43NDU3IDguODMzMDMgMTQuMTQxNyA2LjQzNzAyQzE2LjUzNzcgNC4wNDEwMSAyMC40MjI0IDQuMDQxMDEgMjIuODE4NCA2LjQzNzAyIiBzdHJva2U9IiMxQjI1MzciIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQogICAgPHBhdGggZD0iTTE4LjQ4MDEgMjEuNTkyM0MyNS40OTMzIDIxLjU5MjMgMzIuMzQwMSAyNC42MjE1IDMyLjM0MDEgMjkuMjhWMzAuODJDMzIuMzQwMSAzMS42NzAxIDMxLjY1MDIgMzIuMzYgMzAuODAwMSAzMi4zNkg2LjE2MDEyQzUuMzEwMDQgMzIuMzYgNC42MjAxMiAzMS42NzAxIDQuNjIwMTIgMzAuODJWMjkuMjhDNC42MjAxMiAyNC42MiAxMS40NjcgMjEuNTkyMyAxOC40ODAxIDIxLjU5MjMiIHN0cm9rZT0iIzFCMjUzNyIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K);
}

.form .password::after {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzciIGhlaWdodD0iMzciIHZpZXdCb3g9IjAgMCAzNyAzNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgICA8cGF0aCBkPSJNMTIuMjI4MyAxNS40MlYxMC44VjEwLjhDMTIuMjI4MyA3LjM5ODE1IDE0Ljk2NTkgNC42NDAwMSAxOC4zNDI0IDQuNjQwMDFWNC42NDAwMUMyMS43MTkgNC42NDAwMSAyNC40NTY2IDcuMzk4MTUgMjQuNDU2NiAxMC44VjEwLjhWMTUuNDIiIHN0cm9rZT0iIzFCMjUzNyIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCiAgICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTI1Ljk4NSAzMi4zNkgxMC42OTk3QzkuMDEwNjIgMzIuMzYgNy42NDI1OCAzMC45ODE3IDcuNjQyNTggMjkuMjhWMTguNUM3LjY0MjU4IDE2Ljc5ODMgOS4wMTA2MiAxNS40MiAxMC42OTk3IDE1LjQySDI1Ljk4NUMyNy42NzQgMTUuNDIgMjkuMDQyMSAxNi43OTgzIDI5LjA0MjEgMTguNVYyOS4yOEMyOS4wNDIxIDMwLjk4MTcgMjcuNjc0IDMyLjM2IDI1Ljk4NSAzMi4zNloiIHN0cm9rZT0iIzFCMjUzNyIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCiAgICA8cGF0aCBkPSJNMTMuNzU2OSAyMy45NTMyQzEzLjc1MjQgMjMuOTUzMiAxMy43NDkzIDIzLjk1NjIgMTMuNzQ5MyAyMy45NjA5QzEzLjc0OTMgMjMuOTY1NSAxMy43NTI0IDIzLjk2ODYgMTMuNzU2OSAyMy45Njg2QzEzLjc2MTUgMjMuOTY4NiAxMy43NjQ2IDIzLjk2NTUgMTMuNzY0NiAyMy45NjA5QzEzLjc2NDYgMjMuOTU2MiAxMy43NjE1IDIzLjk1MzIgMTMuNzU2OSAyMy45NTMyIiBzdHJva2U9IiM0MkFEOTgiIHN0cm9rZS13aWR0aD0iMyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+DQogICAgPHBhdGggZD0iTTE4LjM1IDIzLjk1MzJDMTguMzQ1NCAyMy45NTMyIDE4LjM0MjMgMjMuOTU2MiAxOC4zNDIzIDIzLjk2MDlDMTguMzQyMyAyMy45NjU1IDE4LjM0NjkgMjMuOTY4NiAxOC4zNSAyMy45Njg2QzE4LjM1NDUgMjMuOTY4NiAxOC4zNTc2IDIzLjk2NTUgMTguMzU3NiAyMy45NjA5QzE4LjM1NzYgMjMuOTU2MiAxOC4zNTQ1IDIzLjk1MzIgMTguMzUgMjMuOTUzMiIgc3Ryb2tlPSIjNDJBRDk4IiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPg0KICAgIDxwYXRoIGQ9Ik0yMi45MjgxIDIzLjk1MzJDMjIuOTIzNSAyMy45NTMyIDIyLjkyMDQgMjMuOTU2MiAyMi45MjA0IDIzLjk2MDlDMjIuOTIwNCAyMy45NjU1IDIyLjkyMzUgMjMuOTY4NiAyMi45MjgxIDIzLjk2ODZDMjIuOTMyNyAyMy45Njg2IDIyLjkzNTcgMjMuOTY1NSAyMi45MzU3IDIzLjk2MDlDMjIuOTM1NyAyMy45NTYyIDIyLjkzMjcgMjMuOTUzMiAyMi45MjgxIDIzLjk1MzIiIHN0cm9rZT0iIzQyQUQ5OCIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4NCjwvc3ZnPg0K);
}

.form button {
    font-weight: 500;
    font-size: 1rem;
    height: 45px;
    border-radius: 25px;
    align-self: stretch;
    cursor: pointer;
    flex-shrink: 0;
}

.form button.primary {
    background-color: #42AD98;
    border: 2px solid #42AD98;
    color: #FFFFFF;
}

.form button.primary:hover {
    background-color: #1CD3AF;
    border: 2px solid #1CD3AF;
}

.form button.primary:active {
    background-color: #1CD3AF;
    border: 2px solid #42AD98;
}

.form button.primary:disabled {
    background-color: #A0D6CB;
    border: 2px solid #A0D6CB;
}

.form button.secondary {
    background-color: #E8E9EB;
    border: 2px solid #E8E9EB;
    color: #1B2537;
}

.form button.secondary:hover {
    background-color: #EEEFF0;
    border: 2px solid #1CD3AF;
    color: #1B2537;
}

.form button.secondary:active {
    background-color: #EEEFF0;
    border: 2px solid #42AD98;
    color: #1B2537;
}

.password_msg {
    display:none;
    font-size:12px;
    color:rgba(198,69, 53, 1);
}

.copyright {
    color: #8D929B;
    font-size: 10px;
    padding-top: 0.5rem;
}