@media screen and (min-width:770px) {
    #BodyBox {
        width: 70%;
    }

    #LeftMenuLog {
        width: 30%;
    }

    #LoginBox {
        width: 50%;
    }
    #RegisterBox {
        width: 50%;
    }
    #RecoveryBox {
        width: 50%;
    }
    #AuthenticationBox {
        width: 50%;
    }
    #MnuBox {
        display: none
    }
}

@media screen and (max-width:770px) and (min-width:550px) {
    #LeftMenuLog {
        width: 3%;
    }

    #BodyBox {
        width: 97%;
    }

    #LeftMenuLogLink {
        display: none
    }

    #LoginBox {
        width: 55%;
    }
    #RecoveryBox {
        width: 55%;
    }
    #RegisterBox {
        width: 55%;
    }
    #AuthenticationBox {
        width: 55%;
    }
    #MnuBox {
        display: block
    }
}

@media screen and (max-width:550px) {
    #LeftMenuLog {
        width: 3%;
    }

    #BodyBox {
        width: 97%;
    }

    #LeftMenuLogLink {
        display: none
    }

    #LoginBox {
        width: 90%;
    }
    #RecoveryBox {
        width: 90%;
    }
    #RegisterBox {
        width: 90%;
    }
    #AuthenticationBox {
        width: 90%;
    }
    #MnuBox {
        display: block
    }
}

/*#region Body */



body {
    background-color: #f3f3f3
}
#BodyBox {
    float: left;
}
#LeftMenuLog {
    float: left;
    background-color: #14177b;
    height: 100vh;
    position: relative
}
#LeftMenuLogPic {
    position: absolute;
    width: 100%;
    z-index: 10;
    height: 100%;
}
#LeftMenuLogLink {
    position: absolute;
    width: 150px;
    z-index: 20;
    height: 250px;
    right: 0px;
    margin-top: 40vh;
    font-size: 20px;
    font-weight: bold
}
#LeftMenuLog img {
    width: 100%;
    height: 100%;
}
#LeftMenuLogLink a {
    color: #fff;
    text-decoration: none
}
#LeftMenuLogLink div {
    padding: 15px;
    text-align: center;
}
#MnuLog a {
    color: #14177b;
    text-decoration: none;
}

#MnuLog div {
    background-color: #f3f3f3;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    color: #14177b;
    text-decoration: none;
}
#MnuLogTana a {
    color: #14177b;
    text-decoration: none;
}

#MnuLogTana div {
    background-color: #f3f3f3;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    color: #14177b;
    text-decoration: none;
}




.MnuBoxLink {
    width: 50%;
    margin-top: 20px;
    text-align: center;
    float: right;
    cursor: pointer
}
.MnuBoxLink div {
    background-color: #14177b;
    color: #fff;
    width: 90%;
    margin: auto;
    padding: 8px;
    border: none;
    border-radius: 4px;
    font-size: 19px;
    font-weight: bold
}


/*#endregion */


/*#region Login */
#LoginBox {
    position: relative;
    height: 450px;
    margin: auto;
    margin-top: 20vh;
}

#LogLogo {
    text-align: center
}
#LogLogo img {
        width: 100px
    }
.LogTitle {
    color: #9b9b9d;
    text-align: right;
    margin-top: 15px;
    padding-right: 10px
}
.LogTitle span {
        margin-right: 7px
    }
.LogInput {
    margin-top: 10px
}
.LogInput input {
        border: 1px solid #9b9b9d;
        padding: 7px;
        border-right: 5px solid #14177b;
        background-color: #f3f3f3;
        outline: none;
        width: 100%
    }
.LogSubmit {
    margin-top: 25px;
}
.LogSubmit input {
        background-color: #14177b;
        color: #fff;
        width: 100%;
        padding: 8px;
        border: none;
        border-radius: 4px;
        font-size: 19px;
        font-weight: bold
    }
#LogLineBox {
    margin-top: 20px;
    position: relative;
    height: 20px;
}
#LogLine {
    position: absolute;
    height: 4px;
    background-color: #d9d9d9;
    width: 100%;
    margin-top: 8px
}
#LogCircleBox {
    position: absolute;
    width: 100%
}
#LogCircle {
    position: relative;
    height: 20px;
    background-color: #f3f3f3;
    width: 30px;
    margin: auto
}
#LogCircle div {
        position: absolute;
        height: 20px;
        border: 4px solid #d9d9d9;
        width: 20px;
        border-radius: 20px;
        margin-right: 5px
    }
#LogRecoveryBox {
    margin-top: 5px;
    position: relative;
    color: #b1b1b1;
    font-size: 17px;
    text-align: center
}
#LogRecoveryBox div {
        width: 50%;
        float: right;
        cursor: pointer
    }
/*#endregion */

/*#region Register */




#RegisterBox {
    position: relative;
    height: auto;
    margin: auto;
    margin-top: 10vh;
}

#RegLogo {
    text-align: center;
 
}

#RegLogo img {
    width: 100px
}
/*#endregion */

/*#region RecoveryBox */
.Recovery {
    color: inherit;
    text-decoration: none
}

.Recovery:hover {
    color: inherit;
    text-decoration: none
}

#RecoveryBox {
    position: relative;
    height: auto;
    margin: auto;
    margin-top: 20vh;
}


/*#endregion*/

/*#region AuthenticationBox */


#AuthenticationBox {
    position: relative;
    height: auto;
    margin: auto;
    margin-top: 20vh;
}


/*#endregion*/