﻿* { box-sizing: border-box; }
body { border-collapse: collapse; width: 100%; border: 0; margin: 0; padding: 0; background-color: #8A8683; font-family: 'Courier New' }
#Table { display: table; height: 100%; width: 100%; position: absolute; top: 0px; left: 0px; }
#Cell { width: 100%; display: table-cell; vertical-align: middle; }
#Content { margin: 0 auto; text-align: center; }

    form > div { padding: 0.2em; width: 100%; text-align: right; }
        form > div:last-child { height: 3em; }
a, b, h3 { color: #E4EBF2; }
b { white-space: nowrap; display: block; text-align: left; }
h3 { font-size:2rem; text-align:center; }
input { font-size: 1rem; }
input { border: 2px Solid #8ED3F4; background-color: #E4EBF2; color: #5A4D4C; border-radius: 4px; padding: 0.2em 0.5em 0.2em 0.5em; }

input.error { border: 2px Solid Red !important; }
a { font-weight: bold; text-decoration: none; cursor: pointer; }
    a:hover { text-decoration: underline; }
h3 { padding: 0; margin: 0; font-weight: bold; }
.note { font-weight:bold; color: #5A4D4C; font-size:1.3rem; }
.error-upper-block { margin-bottom:.4em; text-align:left; }
.error-upper-block.error { box-shadow: 0 0 .7em .6em rgba(255,119,160,1); color: white; background-color: #FF77A0; }
.error-upper-block.success { box-shadow: 0 0 .5em .6em rgba(0,144,0,1); color: #F7F9FB; background-color: #009000; }

html { font-size: 140%; }
div.login input { width: 100%; }
div.reset-password input { width: 100%; }

@media (min-width:600px) {
    html { font-size: 100%; }
    form { display: inline-table; }
    div.login input { width: 16em; }
    div.reset-password input { width: 10em; }
}

@media (min-width:800px) {
    html { font-size: 110%; }
}

@media (min-width:1000px) {
    html { font-size: 120%; }
    b { display:inline; }
    h3 { font-size: 1.3rem; text-align:right; }
}

@media (min-width:1200px) {
    html { font-size: 130%; }
}

@media (min-width:1400px) {
    html { font-size: 140%; }
}

@media (min-width:1600px) {
    html { font-size: 150%; }
}

@media (min-width:1800px) {
    html { font-size: 160%; }
}

@media (min-width:2000px) {
    html { font-size: 170%; }
}
