*:focus {
    outline: none !important;
    border-color: inherit !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

/** Login 5 start **/
.login-5 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, button, input,p,a,b,li,span,div {
    font-family: "body-font";
}

.login-5 {
    background: url(../img/hero_mini.png) top left no-repeat;
    background-size: 100vw 550px;
    top: 0;
    width: 100%;
    text-align: center;
    bottom: 0;
    opacity: 1;
    z-index: 999;
    min-height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
}

    .login-5 .form-section a {
        text-decoration: none;
    }

    .login-5 .form-inner {
        max-width: 570px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        padding: 70px 90px;
        background: #fff;
        position: relative;
        z-index: 0;
        box-shadow: 0 0 35px rgb(0 0 0 / 10%);
    }

        .login-5 .form-inner:before {
            content: "";
            width: 75px;
            height: 150px;
            position: absolute;
            top: 30px;
            right: 0;
            background: url(../img/img-54.png) top left repeat;
            background-size: cover;
            z-index: -1;
        }

        .login-5 .form-inner:after {
            content: "";
            width: 75px;
            height: 150px;
            position: absolute;
            bottom: 30px;
            left: 0;
            background: url(../img/img-53.png) top left repeat;
            background-size: cover;
            z-index: -1;
        }

    .login-5 .form-section .extra-login {
        float: left;
        width: 100%;
        text-align: center;
        position: relative;
    }

        .login-5 .form-section .extra-login::before {
            position: absolute;
            left: 0;
            top: 10px;
            width: 100%;
            height: 1px;
            background: #e4e4e4;
            content: "";
        }

        .login-5 .form-section .extra-login > span {
            width: auto;
            float: none;
            display: inline-block;
            padding: 1px 20px;
            z-index: 1;
            position: relative;
            font-size: 14px;
            color: #535353;
            text-transform: capitalize;
            background: #fff;
        }

    .login-5 .form-section p {
        color: #535353;
        margin-bottom: 0;
        font-size: 16px;
    }

        .login-5 .form-section p a {
            color: #535353;
        }

    .login-5 .form-section ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .login-5 .form-section .thembo {
        margin-left: 4px;
    }

    .login-5 .form-section h3 {
        margin: 0 0 25px;
        font-size: 26px;
        font-weight: 900;
        color: #040404;
    }

    .login-5 .form-section .form-group {
        margin-bottom: 25px;
    }

    .login-5 .form-section .form-box {
        float: left;
        width: 100%;
        text-align: left;
        position: relative;
    }


    .login-5 .form-section .form-control {
        padding: 14.5px 0;
        font-size: 16px;
        outline: none;
        background: transparent !important;
        color: #535353;
        font-weight: 500;
        border-radius: 0;
        border: none;
        border-bottom: solid 2px #bdbdbd;
        text-align: center;
    }

    .login-5 .form-section .form-box i {
        position: absolute;
        top: 10px;
        right: 0;
        font-size: 23px;
        color: #777575;
    }

    .login-5 .form-section .checkbox .terms {
        margin-left: 3px;
    }

    .login-5 .form-section .terms {
        margin-left: 3px;
    }

    .login-5 .form-section .form-check {
        float: left;
        margin-bottom: 0;
        padding-left: 25px;
        font-size: 16px;
        color: #535353;
    }

        .login-5 .form-section .form-check .form-check-input {
            margin-left: -25px;
        }

        .login-5 .form-section .form-check a {
            color: #535353;
        }

    .login-5 .form-check-input:focus {
        border-color: #ff013d;
        outline: 0;
        box-shadow: none;
    }

    .login-5 .form-check-input:checked {
        background-color: #00c5e7;
        border-color: #00c5e7 !important;
    }

    .login-5 .form-section .form-check-input {
        width: 20px;
        height: 20px;
        margin-top: 0;
        vertical-align: top;
        position: absolute;
        border: 2px solid #c5c3c3;
        border-radius: 0;
    }

    .login-5 .form-section a.forgot-password {
        font-size: 16px;
        color: #535353;
        float: right;
    }

    .login-5 .logo img {
        margin-bottom: 35px;
        height: 45px;
    }

    .login-5 .btn-theme {
        position: relative;
        display: inline-block;
        width: 100%;
        color: #ffffff;
        overflow: hidden;
        overflow: hidden;
        text-transform: capitalize;
        display: inline-block;
        transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -webkit-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        cursor: pointer;
        font-size: 17px;
        font-weight: 400;
        font-family: 'Jost', sans-serif;
        border-radius: 3px;
        border: none;
    }

        .login-5 .btn-theme:hover {
            color: #fff;
        }

            .login-5 .btn-theme:hover::before {
                left: 0%;
                -webkit-transform: scale(1, 1);
                transform: scale(1, 1);
            }

        .login-5 .btn-theme:before {
            position: absolute;
            content: '';
            left: 96%;
            top: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 1;
            -webkit-transition: all 0.4s;
            -moz-transition: all 0.4s;
            -o-transition: all 0.4s;
            transition: all 0.4s;
            transform: skewX(-25deg);
        }

        .login-5 .btn-theme span {
            position: relative;
            z-index: 1;
        }

    .login-5 .btn-check:focus + .btn, .btn:focus {
        outline: 0;
        box-shadow: none;
    }

    .login-5 .btn-lg {
        padding: 0 50px;
        line-height: 55px;
    }

    .login-5 .btn-md {
        padding: 0 45px;
        line-height: 50px;
    }

    .login-5 .btn {
        box-shadow: none !important;
    }

    .login-5 .btn-primary {
        background: #00c5e7;
    }

    .login-5 .btn-theme:before {
        background: #42b4e9;
    }

    .login-5 .form-section ul {
        list-style: none;
        padding: 0;
        margin: 0 0 20px;
    }

    .login-5 .social-list {
        padding: 0;
        text-align: center;
    }

        .login-5 .social-list li a {
            -webkit-transition: all 0.8s;
            transition: all 0.8s;
            bottom: 15px;
        }

        .login-5 .social-list li {
            display: inline-block;
        }

            .login-5 .social-list li a {
                margin: 1px;
                font-size: 14px;
                font-weight: 500;
                width: 110px;
                height: 40px;
                line-height: 40px;
                border-radius: 3px;
                display: inline-block;
                text-align: center;
                color: #fff;
            }

                .login-5 .social-list li a:hover {
                    text-decoration: none;
                }

    .login-5 .facebook-bg {
        background: #4867aa;
    }

        .login-5 .facebook-bg:hover {
            background: #3d5996;
            color: #fff;
        }

    .login-5 .twitter-bg {
        background: #33CCFF;
    }

        .login-5 .twitter-bg:hover {
            background: #56d7fe;
        }

    .login-5 .google-bg {
        background: #db4437;
    }

        .login-5 .google-bg:hover {
            background: #dc4e41;
        }

@media (max-width: 992px) {
    .login-5 .form-inner {
        padding: 50px 35px;
    }

        .login-5 .form-inner:before {
            width: 35px;
            height: 70px;
        }

        .login-5 .form-inner:after {
            width: 35px;
            height: 70px;
        }
}
span.form-validate-error {
    font-size: 13px;
    background-color: #a92626;
    color: white;
    width: 100%;
    display: block;
    padding: 4px 0px;
}