.clearfix:after {

    content: "";

    display: block;

    clear: both;

    height: 0;

    visibility: hidden;

}







.content_wrap {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 600px;

    height: 400px;

    margin: -200px 0 0 -300px;

    /*padding: 20px 40px;*/

    background: #eee;

}

body.login .content_wrap {

    background: transparent;

}

label {
    color: #fff;
}







.top-bar {

    display: none;

}

.header {

    background: #333;

    padding: 0.6em 2em;

    color: #fff;

}

.header .site-logo {

    font-size: 140%;

    font-weight: bold;

}

.form_header {

    text-align: center;



}

h1 {

    /*margin: 0.2em 0 0.2em;*/

    margin: 0;

    padding: 0.4em 0 0.2em;
    color: #fff;

    font-size: 2em;

    text-align: center;

    border-bottom: solid 1px #ccc;



}





.content {

    padding: 1em 2em;

    border-top: solid 1px #fff;

}



button {
    background: lightcyan;
    color: blue;
}

button:hover {
    background: aqua;
    color: blue;

}





.message_wrap {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 460px;

    margin-top: -280px;

    margin-left: -230px;

    background: #fff;

}

.message.error {

    color: red;

    margin: 0 0 0em;

    text-align: center;

    font-size: 24px;

}





.login_form_wrap {

    position: absolute;

    top: 50%;

    left: 50%;

    margin: -230px 0 0 -230px;

    width: 460px;

    height: 460px;
/*
    background: #ddd;
    */
    background: #0c0885;
    background: linear-gradient(350deg,rgba(12, 8, 133, 1) 0%, rgba(9, 33, 121, 1) 36%, rgba(7, 127, 232, 1) 100%);

    border: solid 1px #ccc;



    box-shadow: 5px 5px 15px 10px rgba(0,0,0,0.2);

}

.login_form_wrap .form_wrap {

    padding: 1em 2em;

    border-top: solid 1px #fff;

}



.btn_wrap {

    text-align: center;

    margin: 3em 0 0;

}

.btn_wrap button {

    padding: 0.6rem 2rem;

}

input[type="submit"] {

    -webkit-appearance: none;

    -moz-appearance: none;

    border-radius: 0;

    border-style: solid;

    border-width: 0;

    cursor: pointer;

    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;

    font-weight: normal;

    line-height: normal;

    margin: 0 0 1.25rem;

    position: relative;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    padding: 0.4rem 2rem 0.4rem 2rem;

    font-size: 1rem;

    background-color: #008CBA;

    border-color: #007095;

    color: #fff;

    transition: background-color 300ms ease-out;

}

.input[type="submit"]:hover, input[type="submit"]:focus, .input[type="submit"]:hover, .input[type="submit"]:focus {

    background-color: #007095;

}









body {

background:#eee;

/*
    background: rgba(20,153,86,1);

background: -moz-linear-gradient(-45deg, rgba(20,153,86,1) 0%, rgba(19,147,82,1) 6%, rgba(14,108,54,1) 48%, rgba(7,59,20,1) 100%);

background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(20,153,86,1)), color-stop(6%, rgba(19,147,82,1)), color-stop(48%, rgba(14,108,54,1)), color-stop(100%, rgba(7,59,20,1)));

background: -webkit-linear-gradient(-45deg, rgba(20,153,86,1) 0%, rgba(19,147,82,1) 6%, rgba(14,108,54,1) 48%, rgba(7,59,20,1) 100%);

background: -o-linear-gradient(-45deg, rgba(20,153,86,1) 0%, rgba(19,147,82,1) 6%, rgba(14,108,54,1) 48%, rgba(7,59,20,1) 100%);

background: -ms-linear-gradient(-45deg, rgba(20,153,86,1) 0%, rgba(19,147,82,1) 6%, rgba(14,108,54,1) 48%, rgba(7,59,20,1) 100%);

background: linear-gradient(135deg, rgba(20,153,86,1) 0%, rgba(19,147,82,1) 6%, rgba(14,108,54,1) 48%, rgba(7,59,20,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#149956', endColorstr='#073b14', GradientType=1 );
*/

}



.logo {

    position: absolute;

    top: 1em;

    left: 2em;
/*
    color: rgba(47,204,128,1);
    */
    color: royalblue;

    font-size: 26px;

    font-weight: bold;

}