* {
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    background-size: 16px 16px;
    font-family: Arial;
    /*background-color: #3498DB;*/
    background-color: #272528;
    padding: 50px;
}

.login {
    margin: 40px auto 0;
    width: 500px;
    /* border: 3px solid #006993; */
    box-shadow: 4px 8px 9px 2px black;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    background-color: #222121;
    max-width: 500px;
}

.login-screen {
    /*background-color: #FFF;*/
    padding: 15px;
    border-radius: 5px;
}

.app-title {
    text-align: center;
    color: #777;
    padding: 10px 0px 0px 0px;
    background-color: rgba(25, 24, 24, 0.7215686274509804);
}

.login-form {
    text-align: center;
}

.control-group {
}

input {
    text-align: center;
    background-color: #ECF0F1;
    border: 2px solid transparent;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 200;
    padding: 10px 0;
    width: 300px;
    transition: border .5s;
    margin-bottom: 10px;
}

    input:focus {
        border: 2px solid #d27a11;
        box-shadow: none;
    }

.btn {
    border: 2px solid transparent;
    background: #ff9e2a;
    color: #ffffff;
    font-size: 16px;
    line-height: 24px;
    padding: 7px 0;
    text-decoration: none;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    width: 300px;
    margin: 0 auto;
    cursor: pointer;
}

    .btn:hover {
        background-color: #d27a11;
    }

.login-link {
    font-size: 12px;
    color: #444;
    display: block;
    margin-top: 12px;
}

.login label, .login span {
    color: white;
    width: 100%;
    display: block;
}
.LoginMessage {
    /*margin: 10px;
            color: #ECF0F1;
            background-color:#ff5454;
            border: 1px solid #c40a0a;
            padding:10px;
            width: 300px;*/
    border: 2px solid transparent;
    background: #ff5454;
    color: #ffffff;
    font-size: 16px;
    line-height: 25px;
    padding: 10px 0;
    text-decoration: none;
    text-shadow: none;
    border-radius: 3px;
    box-shadow: none;
    transition: 0.25s;
    display: block;
    width: 300px;
    margin: 10px auto;
}

.TermsLabel {
    font-size: 12px;
    margin: 20px auto;
    display: block;
}

    .TermsLabel a {
        color: #ff9e2a;
        letter-spacing: 1px;
        text-decoration: none;
    }

        .TermsLabel a:hover {
            text-decoration: underline;
        }

.Password-form {
}

div#ForgotPassword {
    /*display: table;*/
    height: 100%;
    position: fixed;
    vertical-align: middle;
    left: -400px;
    padding: 14.5% 1%;
    padding-bottom: 0;
    box-shadow: 4px 8px 9px 2px black;
    text-align: center;
    z-index: 999;
    top: 0;
    overflow-x: hidden;
    transition: 0.5s;
    background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
    background-color: #282828;
    background-size: 16px 16px;
}

    div#ForgotPassword.ForgotPasswordForm {
        left: 0;
    }

.MenuOff {
    float: right;
    font-size: 20px;
    z-index: 9999;
}

#MainContainer {
    transition: width .5s;
}

#Closed {
    transition: all .5s ease-in-out;
    color: #fff;
    font-size: 13px;
}

#MenuLinks {
    transition: all .1s ease-in-out;
}

a.closebtn {
    font-size: 30px;
    display: inline-block;
    line-height: 20px;
    margin-right: 10px;
    text-decoration: none;
    color: #eea93a;
}

.MenuOn span {
    font-size: 18px !important;
    text-transform: uppercase;
    padding: 5px;
    border-radius: 4px;
}

.MenuOff {
    display: block;
    text-align: right;
    width: 100%;
}

.Password-form {
    max-width: 330px;
    margin: 0 auto;
}

.login:after {
    position: absolute;
    width: 65%;
    height: 180px;
    content: "";
    display: block;
    pointer-events: none;
    top: 0;
    margin-left: 208px;
    -webkit-transform-style: flat;
    transform-style: flat;
    -webkit-transform: skew(20deg);
    transform: skew(20deg);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 100%, 0.2)), color-stop(100%, hsla(0, 0%, 100%, 0)));
    background: -webkit-linear-gradient(top, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0) 100%);
    background: -ms-linear-gradient(top, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#42ffffff', endColorstr='#00ffffff', GradientType=0);
    background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0) 100%);
}

.login-screen:before {
    border-radius: 50%;
    box-shadow: 0 0 6px 4px #fff;
    content: "";
    display: block;
    height: 5px;
    left: 35%;
    position: absolute;
    top: -7px;
    width: 8px;
    z-index: 99;
}

.login-screen:after {
    background: -webkit-linear-gradient(left, #272528, #444444, #e8e8e8, #272528, #272528, #272528);
    background: linear-gradient(to right, #000000, #444444, #b6b6b8, #39373a, #3a383b, #191919);
    content: "";
    display: block;
    height: 1px;
    left: 25%;
    position: absolute;
    top: 0;
    width: 150px;
}

@media only screen and (max-width: 800px) {
    body {
        padding: 30px 0;
    }

    .app-title a img {
        max-width: 230px;
        height: auto;
    }

    .app-title {
        padding: 10px;
    }

    .login {
        width: 100%;
        margin: 50px auto;
    }

    .login-screen {
        padding: 0px;
    }

    div#ForgotPassword {
        width: 100%;
        left: -110%;
        padding: 40% 1%;
        padding-bottom: 0;
    }

        div#ForgotPassword.ForgotPasswordForm {
            left: 0;
        }
}