@import url('https://fonts.googleapis.com/css?family=Encode+Sans+Condensed:400,600');
* { padding:0 0; margin:0 0; box-sizing: border-box;}
html,body { color:#222; font-family:'Encode Sans Condensed', sans-serif; font-size:10pt; height:100%; color: #212121;}
h1,h2,h3,h4 { color:#006161; margin:0; }
h2 {font-weight:300; font-size: 40px; line-height: 1.8; margin-top: 10px; margin-bottom: 10px;}
a, a:visited, a:focus, a:active, a:link { text-decoration:none; outline:0; }
a { color:#006161; transition:.2s ease-in-out; }
ul { padding:10px; }
li { list-style:square; }
div { padding:0; margin:0; }

.page { width: 100vw; height: 100vh; }
.header {  position: fixed; width: 100%; height: 70px; background: #FFFFFF; color: #C77400; font-size: 26pt; text-align: center; z-index: 10000;}
.header_logo { height: 70px; position: fixed; top: 0; left: 0;}
.header_logo img { height: 70px; cursor: pointer; }
.header_title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.section_intro { height: calc(100vh - 130px); width: 100vw;  padding: 0; margin: 0; }

.box               { width: 100%; height:  100%; color: white; text-align: left; position: relative; }
.box_frame         { width: 40%; margin: auto; min-height: 400px; background: rgba(255,255,255,0.9); color: #006161; box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25); border-radius: 25px; text-align: left; padding:20px; font-size: 22pt; position: relative;  top: calc(50% - 400px)}

.login-banner { width: 100%; text-align: center; float: left; margin-top: 30px; height: 40px;}
.registered-banner {  width: 100%; text-align: center; float: left; margin-top: 30px; height: 40px;font-size: 12pt; color: #444444; }
.footer { position: fixed; bottom: 0px; width:100%; height:50px; color:#FFFFFF; border-top:2px solid #212121; background-color: #212121; z-index: 10;}
.footer div { float:left;margin-left: 30px; text-align:left; font-weight:300; font-size:1.5em; color: #FFFFFF !important; }
.footer a { color: #ffffff; transition:.2s ease-in-out; }

.line100 { width:100%; float:none; display:block; clear:both; height: 80px; }
.label {width:28%; text-align:right; color:#006161; float:left; margin-right:1%; padding-top:0px; }
.field {padding-top:2px; padding-left:5px; padding-bottom:5px; float:left; width:65%;  }

input { background: #F9F8CD; font-size: 1em; color: #555; border: 1px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; overflow: hidden; }
select { background: #F9F8CD; font-size: 1em; color: #555; border: 1px solid transparent; box-shadow: 0px 0px 2px rgba(0,0,0,0.5); padding: 2px 5px; float: left; margin-right: 5px; border-radius: 5px; font-weight: 300; overflow: hidden; }
input:focus { outline: none; background: #C6DFFA; }
input[type=button] { width:100px; background:#F08C00; color:#fff; text-align:center; cursor:pointer; box-shadow:0px 0px 2px rgba(0,0,0,0.5); margin-right:10px; border-radius:5px;}
input[type=button]:hover { background:#006161; }
input[type=submit] { width:100px; background:#F08C00; color:#fff; text-align:center; cursor:pointer; box-shadow:0px 0px 2px rgba(0,0,0,0.5); margin-right:10px; }
input[type=submit]:hover { background:#006161; }

.error { width:99%; padding-left:1%; background: #aa0000; color:#ffffff; border-radius:5px; }
.login_forgotpassword { padding-top:10px; padding-bottom:10px;  }

.pointer { cursor: pointer; }

#username { width: 90%; min-width: 200px; }
#pass { width: 90%; min-width: 200px; }
#accountid { width: 90%; min-width: 200px; }

@media screen and (max-width:1200px)
{
    header { display: flex; position: fixed; width: 100%; height: 50px; background: #FFFFFF; color: #fff; justify-content: center; align-items: center; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #C77400; font-size: 14pt; text-align: center; }
    .header_logo_notused  { width: 75px; float:left; height: 50px; background-image: url('/images/clockwork_logo_clear.png'); background-repeat: no-repeat; background-size: contain; position: fixed; top: 0; right: 0;}
    .header_div { width: 100%; float: left;}
    .section_intro { height: calc(100vh - 100px); width: 100vw;  padding: 0; margin: 0; }

    .box               { width: 100%; height:  100%; color: white; text-align: left; position: relative; }
    .box_frame         { width: 90%; margin: auto; min-height: 400px; background: rgba(255,255,255,0.9); color: #006161; box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25); border-radius: 25px; text-align: left; padding:20px; font-size: 16pt; position: relative;  top: 150px;}

    .login-banner { width: 100%; text-align: center; float: left; margin-top: 30px; height: 60px;}
    .footer { position: fixed; bottom: 0px; width:100%; height:50px; color:#FFFFFF; border-top:2px solid #212121; background-color: #212121; z-index: 10;}
    .footer div { float:left;margin-left: 30px; text-align:left; font-weight:300; font-size:1.2em; color: #FFFFFF !important; }
    .footer a { color: #ffffff; transition:.2s ease-in-out; }

    .line100 { width:100%; float:none; display:block; clear:both; height: 60px; }
    .label {width:30%; text-align:right; color:#006161; float:left; margin-right:1%; padding-top:0px; }
    .field {padding-top:2px; padding-left:5px; padding-bottom:5px; float:left; width:65%;  }
    #username { width: 90%; min-width: 150px; }
    #pass { width: 90%; min-width: 150px; }
    #accountid { width: 90%; min-width: 150px; }

}