.mainLogin {
    background: #222D32;
}

    .mainLogin .limiter {
        margin: 0 auto;
    }

    .mainLogin .container-login100 {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        /*align-items: center;*/
        margin: 0px;
        padding: 0px;
    }

    .mainLogin .input-field {
        width: 100%;
        padding: 10px;
    }

    .mainLogin .input-icons {
        width: 100%;
        margin-bottom: 10px;
    }

        .mainLogin .input-icons i {
            position: absolute;
            color: #115173;
        }

        .mainLogin .input-icons input {
            padding-left: 40px;
            background-color: #F5F5F5;
            color: #000000;
        }
.field-icon {
    float: right;
    margin-right: 10px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
}

    .mainLogin ::placeholder {
        color: #D1D1D1;
        opacity: 1; /* Firefox */
    }

    .mainLogin :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: #D1D1D1;
    }

    .mainLogin ::-ms-input-placeholder { /* Microsoft Edge */
        color: #D1D1D1;
    }
    .mainLogin .custom-control-label {
        color: #D1D1D1;
        font-weight: normal;
    }

    .mainLogin .btn-primary,
    .mainLogin .btn-primary:hover {
        background-color: #F9CD00;
        border-color: #F9CD00;
        font-weight: bold;
    }

    .mainLogin .icon {
        padding: 10px;
        min-width: 40px;
    }

    .mainLogin .title {
        color: #707070;
        text-align: center;
        font-size: large;
        margin: 25px 0px;
    }

    .mainLogin .wrap-login100 {
        width: 50%;
        margin: 10% 0px;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
        flex-direction: row;
        padding: 0px;
        border-radius: 10px;
    }

    .mainLogin button:focus {
        outline: 0;
    }

    .mainLogin .text_vertical {
        writing-mode: vertical-lr;
    }

    .mainLogin .leftpane {
        width: 50%;
        float: left;
        border-collapse: collapse;
        background: #F5F5F5;
    }

    .mainLogin .middlepane {
        width: 42%;
        height: 100%;
        float: left;
        border-collapse: collapse;
    }

    .mainLogin .rightpane {
        width: 6%;
        height: 100%;
        position: relative;
        float: right;
        margin-left: auto;
        border-collapse: collapse;
    }

    .mainLogin .login100-flex {
        flex: 0;
    }

    .mainLogin .main-logo {
        background: #F5F5F5;
        border-radius: 10px 0px 0px 10px;
        display: flex;
        align-items: center;
    }

    .mainLogin img {
        width: 100%;
    }

    .mainLogin a.btn-link {
        color: #337AB7;
    }

    .mainLogin .content-login {
        width: 100%;
        height: 100%;
    }

    .mainLogin .loginForm {
        display: flex;
        justify-content: center;
        align-self: center;
    }

@media screen and (max-width: 992px) {
    .mainLogin .main-logo {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
        padding: 20px 20px;
    }

    .mainLogin .loginForm {
        width: 100%;
    }
}
@media screen and (max-width:668px) {
    .mainLogin .wrap-login100 {
        width: 75%;
    }
}

@media screen and (max-width:320px) {
    .mainLogin .wrap-login100 {
        width: 100%;
    }
}