@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap");

body {
    color: #686b6e;
}


.login-container {
    background-color: #f9f9f9;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Open Sans', sans-serif;
}

.form-label{
            font-size:13px;
}

.login-container::before {
    content: '';
    width: 50%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #16325b;
}

.shapeOne {
    position: absolute;
    right: 0;
    top: 0;
}

.shapeOne img {
    float: right;
}

.shapeTwo {
    position: absolute;
    right: 0;
    bottom: 0;
}

.shapeTwo img {
    width: 300px;
}

.login-container .container {
    width: 80%;
    position: relative;
    z-index: 99999;
    background: #f6f6f6;
    border-bottom-right-radius: 20px;
    border-top-right-radius: 20px;
    border-top-left-radius: 35px;
    border-bottom-left-radius: 35px;
}

.login-container .container .row::before {
    position: absolute;
    top: 0;
    left: 70px;
    background: url(img/shape1.png) no-repeat;
    width: 113px;
    height: 159px;
    background-size: 70%;
}

.login-container .container .row::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 2px;
    background: url(img/rebar1.png) no-repeat bottom right;
    width: 327px;
    height: 224px;
}

.login-container .inner-container {
    box-shadow: 0px 0px 40px #000 4a;
    border-radius: 20px;
    position: relative;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    z-index: 999;
}

.login-container .inner-container::before {
    content: '';
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #16325b;
    border-bottom-left-radius: 20px;
    border-top-left-radius: 20px;
}

.login-container .inner-container .login-text {
    position: relative;
    z-index: 999;
    font-size: 14px;
    color: #fff;
    font-weight: normal;
    width: 80%;
    line-height: 1.8;
}

h3 {
    color: black;
    font-weight: 700;
    text-transform: uppercase;
}

p {
    color: black;
    font-size: large;
    font-weight: 600;
    text-align: justify;
}

label {
    color: black;
    font-weight: 600;
}

.loginBox a, .loginBox .form-check, #forgetForm a, #forgetForm  p{
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

#forgetForm a{

    font-weight:bolder;
}

    #forgetForm h3 {
        text-transform: none;
    }

.vl {
    width: 1px !important;
    margin: 30px;
    background-color: black;
    opacity: 1;
}

input {
    border-color: #c9c9c9;
}

.loginBox .form-group .form-control,.formBox {
    padding-left: 35px;
}

.loginBox {
    width: 80%;
}

.loginBox .form-group span {
    position: relative;
    margin-top: -30px;
    float: left;
    margin-left: 12px;
}

.loginBox .form-group span.showHidePassword {
    float: right;
    cursor: pointer;
    margin-right: 10px;
}

::ng-deep .submitBtn {
    background-color: #18335b !important;
    font-size: 16px;
    width: 200px;
    color: #fff;
    line-height: 48px;
    border-radius: 6px;
    border: 0;
}

::ng-deep .loginBox .is-invalid .invalid-feedback, ::ng-deep .loginBox .is-invalid + * .invalid-feedback {
    position: absolute;
}

@media only screen and (max-width: 768px) {
    .login-container {
        background-color: #16325b;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Open Sans', sans-serif;
    }

    .login-container::before, .login-container .inner-container::before, .login-container .inner-container .col-md-6:nth-child(1), .login-container .shapeOne, .login-container .shapeTwo, .login-container .container .row::after {
        display: none !important;
    }

    .loginBox {
        width: 100%;
    }

    .login-container .container {
        width: 90%;
    }

    .login-container .inner-container .col-md-6:nth-child(2) {
        width: 70vw;
    }
}


 

.login-container {
    background-color: #f9f9f9;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Open Sans,sans-serif
}

    .login-container:before {
        content: "";
        width: 50%;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #16325b
    }

.shapeOne {
    position: absolute;
    right: 0;
    top: 0
}

    .shapeOne img {
        float: right
    }

.shapeTwo {
    position: absolute;
    right: 0;
    bottom: 0
}

    .shapeTwo img {
        width: 300px
    }

.login-container .container {
    width: 80%;
    position: relative;
    z-index: 99999;
    background: #f6f6f6;
    border-radius: 35px 20px 20px 35px
}

  /*  .login-container .container .row:before {
        position: absolute;
        top: 0;
        left: 70px;
        background: url(shape1.0c0c3de5205f5294.png) no-repeat;
        width: 113px;
        height: 159px;
        background-size: 70%
    }

    .login-container .container .row:after {
        content: "";
        position: absolute;
        bottom: -40px;
        left: 2px;
        background: url(rebar1.31b736d811b65187.png) no-repeat bottom right;
        width: 327px;
        height: 224px
    }*/

.login-container .inner-container {
    box-shadow: 0 0 40px #0000004a;
    border-radius: 20px;
    position: relative;
    border: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    z-index: 999
}

    .login-container .inner-container:before {
        content: "";
        width: 50%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: #16325b;
        border-bottom-left-radius: 20px;
        border-top-left-radius: 20px
    }

    .login-container .inner-container .login-text {
        position: relative;
        z-index: 999;
        font-size: 14px;
        color: #fff;
        font-weight: 400;
        width: 80%;
        line-height: 1.8
    }

h3 {
    color: #000;
    font-weight: 700;
    text-transform: uppercase
}

p {
    color: #686b6e;
    font-size: large;
    font-weight: 600;
    text-align: justify
}

label {
    color: #000;
    font-weight: 600
}

.loginBox a, .loginBox .form-check {
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px
}

.vl {
    width: 1px !important;
    margin: 30px;
    background-color: #000;
    opacity: 1
}

input {
    border-color: #c9c9c9
}

.loginBox .form-group .form-control {
    padding-left: 35px
}

.loginBox {
    width: 80%
}

    .loginBox .form-group span {
        position: relative;
        margin-top: -30px;
        float: left;
        margin-left: 12px
    }

    .loginBox .form-group span.showHidePassword {
        float: right;
        cursor: pointer;
        margin-right: 10px
    }

.submitBtn {
    background-color: #18335b !important;
    font-size: 16px;
    width: 200px;
    color: #fff;
    line-height: 48px;
    border-radius: 6px;
    border: 0
}

.loginBox .is-invalid .invalid-feedback, .loginBox .is-invalid + * .invalid-feedback {
    position: absolute
}

.logoBox {
    width: 100%;
    display: flex;
    align-items: center;
    justify-items: center;
    align-content: space-around;
    flex-wrap: nowrap;
    justify-content: center;
}

@media only screen and (max-width: 768px) {
    .login-container {
        background-color: #16325b;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Open Sans,sans-serif
    }

        .login-container:before, .login-container .inner-container:before, .login-container .inner-container .col-md-6:nth-child(1), .login-container .shapeOne, .login-container .shapeTwo, .login-container .container .row:after {
            display: none !important
        }

    .loginBox {
        width: 100%
    }

    .login-container .container {
        width: 90%
    }

    .login-container .inner-container .col-md-6:nth-child(2) {
        width: 70vw
    }
}