:root {
    --login-form-width:             500px;
    /* --login-background:             url( '/static/home/img/login_background.jpg' ); */
    --login-background:             url( '/static/home/img/tso_background.jpg' );
    --login-background-font-color:  white;
}

body {
    /* width:                  100%; */
    min-height:             100vh;
    background-image:       var( --login-background );
    background-repeat:      no-repeat;
    background-position:    center;
    background-size:        cover;
}

h2 {
    margin-top:             var( --common-space );
    margin-bottom:          var( --common-space );
    font-size: var( --font-normal );
    text-transform: uppercase;
}

form {
    margin-top:             0px;
}

div.page-content {
    margin:                 15vh auto;
    width:                  var( --login-form-width );
}

div.logo-bar {
    text-align:             center;
    margin-bottom:          calc( 0.0628 * var( --login-form-width ) );
}

img.logo-bar.logo { 
    max-width:              var( --login-form-width );
    height:                 calc( 0.25 * var( --login-form-width ) );
}

div.login-form {
    padding:                var( --common-space ) calc( 2.5 * var( --common-space ) ) var( --common-space );
    background-color:       white;
}

div.site-name {
    margin-top:             calc( -1.0 * var( --common-space ) );
    font-size:              var( --font-tiny );
    font-weight:            var( --font-bold );
    /* color:                  var( --header-navi-background ); */
}

div.login-form.errors {
    min-height:             var( --font-normal );
    max-height:             var( --font-normal );
    padding:                0px;
    margin:                 0px;
    color:                  var( --d6-color );
    font-size:              var( --font-small );
}

div.login-form.message {
    padding:                0px;
    font-size:              var( --font-small );
    text-align:             justify;
}

div.login-form > div {
    max-width:              var( --login-form-width ) !important;
}

div.footer {
    margin:                 calc( 0.0628 * var( --login-form-width ) ) 0px 0px 0px;
}

div.footer-content {
    width:                  var( --login-form-width ) !important;
    border:                 none;
    color:                  var( --login-background-font-color );
}

div.form-field.submit {
    margin:                 calc( 1.5 * var( --common-space ) ) auto var( --common-space ) auto;
/*
    padding-left:           33%;
    padding-right:          33%;
*/
}

div.form-field.option {
    margin-top:             calc( -0.5 * var( --common-space ) );
    float:                  right;
/*
    width:                  100%;
    height:                 var( --font-size );
*/
}

input[type=submit] {
    cursor:                 pointer;
    width:                  calc( 0.33 * var( --login-form-width ) );
    height:                 var( --font-size );
    line-height:            var( --font-size );
    text-transform:         uppercase;
    margin-bottom:          0;
}

a.login-form.link {
    color:                  var( --header-navi-background );
    font-size:              var( --font-small );
}