/**************************************************
 * Variables
 **************************************************/
:root {

    /* Body */


    /* Wrapper */
    --wrapper--width: 360px;
    --wrapper--height: 380px;
    --wrapper-top--height: 90px;

    --wrapper-middle--padding: 20px;

    /* Header */
    --header--height: 90px;
    --header-top--height: 28px;
    --header-bottom--height: 62px;

    /* Footer */
    --footer--height: 20px;


    /**/
    --avatar--diameter: 60px;


    /* frm elements */
    --input--width: 100%;
    --input--padding: 12px;
    --input--padding-x: 8px;
    --input--padding-y: 0;

    --input--border-radius: 5px;

    --input--font-weight: 500;
    --input--font-size: 1.2rem;

    --transform--scale: 0.65;
    --transform--translatey: -30px;
    /*transform: scale(0.65) translateY(-30px);*/


}





/**************************************************
 * Environment
 **************************************************/

*{
    margin: 0 auto;
    padding: 0;
}

html, body{
    height: 100%;
    font-family: arial;
}

html a{
    text-decoration: none;
    color: var(--font-color);
}

body{
    background-color: var(--body--background-color);
    background-repeat: repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
}





/**************************************************
 * Structure
 **************************************************/

#body{
    /*width: 100%;*/
    height: 100%;
    margin: 0;
    display: flex;
    /*justify-content: center;*/
    align-items: center;

    /*border: solid 5px green;*/
}

#wrapper{
    /*position: relative;*/
    /*display: none;*/
    /*display: table;*/
    /*height: 500px;*/
    /*height: var(--wrapper--height);*/
    /*max-height: 300px;*/
    width: 100%;
    /*width: var(--wrapper--width);*/
    /*width: var(--wrapper--width);*/
    /*width: 360px;*/
    min-width: var(--wrapper--width);
    min-height: 100%;
    /*height: 200px;*/

    /*padding: 10px;*/
    /*border: solid 1px var(--border-color);*/
    background-color: #ffffff;
    /*border-radius: 5px;*/

    /*border: solid 5px red;*/
}

#wrapper-top{
    width: 100%;
    /*height: var(--wrapper-top--height);*/
    /*background: url('/images/general/affinety-logo_730x269.png') left center no-repeat;*/
    /*background-size: 300px;*/
    /*background-position: center center;*/
    /*background: url('/images/formatting/header-bg.png') repeat-x;*/

    text-align: center;

    /*border: solid 1px #00f;*/
}

    #header{
        height: var(--header--height);
        background: url('/images/formatting/header-bg.png') repeat-x;
        /*border: solid 1px red;*/
    }

    #header-top{
        height: var(--header-top--height);
        background: url('/images/general/logo-02_380x55.png') no-repeat;
        background-position: 10px 3px;
        background-size: 138px 20px;

        /*border: solid 1px #00F;*/
    }

    #header-bottom{
        position: relative;
        height: var(--header-bottom--height);

        /*border: solid 1px #FF0;*/
    }

        #header-client{
            display: flex;
            height: var(--header-bottom--height);
            align-items: center;
            /*justify-content: center;*/
            /*border: solid 1px #00F;*/
        }

        #header-client-avatar{
            flex: 100px;
            height: var(--header-bottom--height);
            width: 100px;
            min-width: 62px;
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 55px;

            /*border: solid 1px #00F;*/
        }

        #header-client-name{
            flex: 100%;
            padding-left: 10px;

            text-align: left;
            font-size: 1.3em;
            color: var(--header-caption--font-color);


            /*border: solid 1px #00F;*/
        }

        .header-client-name{
            white-space: nowrap;
        }

        #header-client-name span{
            /*vertical-align: middle;*/
        }



#wrapper__middle{
    margin: var(--wrapper-middle--padding);
    width: calc(100%  - calc(var(--wrapper-middle--padding) * 2));
    border-radius: 5px;

    /*border: solid 1px #0f0;*/
}

.wrapper__bottom{
    /*border: solid 1px #0f0;*/
}





/**************************************************
 * Elements
 **************************************************/
#auth-title{
    /*flex: 100%;*/
    padding: 10px 0 25px 0;

    font-size: 2em;
    color: var(--font-color);
    text-align: center;

    /*border: solid 1px #0F0;*/
}

#auth-instruction{
    padding-bottom: 15px;
    /*border: solid 1px #F00;*/
}

#auth-user{
    display: flex;
    height: 70px;
    /*padding-bottom: 15px;*/
    /*border: solid 1px #0F0;*/
}

#auth-user-left{
    position: relative;
    flex: 30%;
    text-align: center;
    /*border: solid 1px #F00;*/
}

#auth-user-right{
    position: relative;
    flex: 70%;
    /*border: solid 1px #F00;*/
}

.auth-caption{
    margin-bottom: 10px;
    font-size: .9em;
    font-style: italic;
    color: red;
    overflow: hidden;
}

#auth-footer{
    display: flex;
    min-height: var(--footer--height);
    padding-top: 20px;
    /*border: solid 1px #00F;*/
}

.auth-footer-left{
    flex: 50%;
    /*border: solid 1px #F00;*/
}

.auth-footer-right{
    flex: 50%;
    /*border: solid 1px #F00;*/
    text-align: right;
}

#auth-avatar-wrapper{
    /*position: relative;*/

    width: var(--avatar--diameter);
    height: var(--avatar--diameter);
    background-color: #dbe8f5;
    background-repeat: no-repeat;
    border-radius: 60px;
    margin-top: -10px;
    /*margin: 3px 5px;*/

    text-align: center;
    font-size: 1.6em;
}

#auth-avatar-wrapper:before{
    position: relative;
    top: 16px;
    text-align: center;
    color: #466692;
}

#auth-avatar{
    width: var(--avatar--diameter);
    text-align: center;
    border-radius: calc(var(--avatar--diameter)/2)
    /*border: solid 1px #F00;*/
}





/*!***************************************************/
 /** Formatting*/
 /***************************************************!*/
/*.form--center{*/
    /*position: absolute;*/
    /*margin: 0;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*-ms-transform: translate(-50%, -50%);*/
    /*transform: translate(-50%, -50%);*/
    /*white-space: nowrap;*/
/*}*/

/*.form--vcenter{*/
    /*margin: 0;*/
    /*position: absolute;*/
    /*top: 50%;*/
    /*-ms-transform: translateY(-50%);*/
    /*transform: translateY(-50%);*/
/*}*/

/*.form--hcenter{*/
    /*margin: 0;*/
    /*position: absolute;*/
    /*left: 50%;*/
    /*-ms-transform: translateX(-50%);*/
    /*transform: translateX(-50%);*/
/*}*/





/**************************************************
 * Misc
 **************************************************/
/*.spacer-20{*/
    /*min-height: 20px;*/
    /*margin: 10px 0;*/
/*}*/

.alert-div{
    background-color: var(--background-color-alert);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    color: var(--font-color-alert);
}


.error-div{
    background-color: var(--background-color-error);
    border-radius: 5px;
    padding: 5px;
    margin-bottom: 10px;
    color: var(--font-color-error);
}





@media (min-width: 400px){

    #wrapper {
        min-height: 0;
        width: var(--wrapper--width);

        border: solid 1px var(--border-color);
        background-color: var(--background-color);
        border-radius: 5px;
    }

}