/*======  Main Css Rules  for Main Elements in The project  =====*/
    
    body {
        width: 100%;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px;
        background-image: url("http://static.tumblr.com/b2bd344682abbfb5ab70acd94e7519b8/nhuknuz/Xnuow0df9/tumblr_static_tumblr_static_1ew52eyf0gf4go84oo00ooowg_focused_v3.jpg");
        background-size: cover;
        
    }
    
    * {
        box-sizing: border-box;
    }
    
    a {
        text-decoration: none;
        transition: all .3s ease-in-out
    }
    /*======   End of Main Css Rules  ====== */
    
    .mainLogin {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .login {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .lgn {
        width: 900px;
        background: #FFF;
        
        opacity: 0.9;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 20px 30px;
        align-items: center;
    }
    
    .lgn .img {
        opacity: 1  !important;
        margin-bottom: 35px;
        margin-left:40px;
    }
    
    .login-form {
         opacity: 1 !important;
        margin-left: 10px;
    }
    
    .login-form h4 {
        font-size: 32px;
        text-align: center;
        margin-bottom: 20px;
        text-transform: capitalize;
        color: #555
    }
    
    .login-form .form-group {
        margin: 15px 0;
        display: flex;
        align-items: center;
        position: relative;
    }
    
    .form-group .form-control {
        background-color: #e6e6e6;
        padding: 11px 20px 11px 65px;
        color: #666;
        border-radius: 50px;
        font-size: 17px;
        font-family: 'arial';
        border-top-right-radius: 50px !important;
        border-bottom-right-radius: 50px !important;
        transition: all .2s ease-in-out;
        outline: none !important;
        box-shadow: none;
        border-color: #DDD
    }
    
    .form-group i {
        position: absolute;
        left: 35px;
        font-size: 20px;
        color: #777;
        text-align: center;
        transition: all .2s ease;
    }
    
    .btn {
        display: block;
        border-radius: 50px;
        padding: 9px;
        margin-top: 35px;
        background-color: #57b846;
        border-color: #57b846;
        text-transform: uppercase;
        font-size: 17px;
        outline: none !important;
        color: #FFF !important;
    }
    
    .forget {
        display: flex;
        justify-content: center;
        margin: 20px;
        color: #888;
    }
    
    .forget a {
        color: #555;
    }
    
    .New-Account {
        display: flex;
        justify-content: center;
        margin-top: 50px;
    }
    
    .New-Account a {
        color: #888;
    }
    
    .btn:hover {
        background-color: #222;
    }
    
    .input-group:focus i {
        position: absolute;
    }
    
    a:hover {
        color: #57b846
    }
 @media (max-width: 575.98px) {
        .lgn {
            width: 300px;
            padding: 50px 15px;
        }
        .lgn .img {
            margin-bottom: 70px;
            display: none;
        }
        .login-form {
            margin-left: 0;
        }
        .login-form h4 {
            margin-bottom: 60px;
        }
        .forget {
            margin: 15px 0;
            color: #888;
        }
        .New-Account {
            margin-top: 40px;
        }
    }
    /*Small devices (landscape phones, 576px and up)*/
    
    @media (min-width: 576px) and (max-width: 1199.98px) {
        .lgn {
            width: 600px;
            padding: 50px 30px;
        }
        .lgn .img {
            margin-bottom: 50px;
            padding: 0 50px;
            display: block;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        img {
            width: 100%;
        }
        .login-form {
            margin-left: 0;
        }
        .login-form h4 {
            margin-bottom: 60px;
        }
        .forget {
            margin: 15px 0;
            color: #888;
        }
        .New-Account {
            margin-top: 40px;
        }
    }

    .notification {display: block; padding: 1em 35px; margin-left:20px; margin-bottom: 0.8em; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.2; width:auto; }

.notification.undone {border: 1px solid #c88383; background: url(images/notifications/cross.png) no-repeat 10px center #fabbbb; color: #882626}
.notification.done {border: 1px solid #90b96b; background: url(images/notifications/tick.png) no-repeat 10px center #c2ee9b; color: #345f0e}
.notification.information {border: 1px solid #7ea2bf; background: url(images/notifications/information-balloon.png) no-repeat 10px center #b6d9f4; color: #1e4f74}
.notification.setting {border: 1px solid #b7b7b7; background: url(images/notifications/gear.png) no-repeat 10px center #e2e2e2; color: #454545}
.notification.warning {border: 1px solid #c2c193; background: url(images/notifications/exclamation.png) no-repeat 10px center #f1efb1; color: #6c6913}