body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Solution for iOS devices */
@media screen and (max-device-width: 320px), screen and (-webkit-min-device-pixel-ratio: 2), screen and (device-width: 768px) {
    body {
        -webkit-text-size-adjust: none;
    }
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea,
select {
    max-width: 280px;
}

/* Set padding to display errors that occur during databinding */
.padding-error {
    padding-top: 20px;
}

body, html {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    background-color: #FFFFFF;
    color: #859BC2;
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

    .flex-container .div1 {
        background-color: #000;
        background-position: center top;
        background-repeat: no-repeat;
        background-image: url(https://rapidapresources.blob.core.windows.net/rapidimages/LoginScreen-5-V2.png);
        background-size: auto 100%;
        text-align: center;
        line-height: 75px;
        font-size: 30px;
    }

.inner-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #FFFFFF;
}

    .inner-wrapper > div {
        padding: 20px;
    }

.flex-container-inner {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #859BC2;
}

    .flex-container-inner > div {
        padding: 0px 30px;
    }

        .flex-container-inner > div > h4 {
            font-size: 20px;
        }

.main-box {
    border-right: 2px solid #859BC2
}

.verticle-flex {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
}

    .verticle-flex > p {
        text-align: center;
        line-height: 75px;
        font-size: 30px;
        margin-bottom: 0px;
    }

.text-danger.login > ul {
    padding-left: 13px !important;
}

.flex-grow-2 {
    flex-grow: 2;
}

.flex-grow-10 {
    flex-grow: 10;
}

@media only screen and (max-width: 767px) {
    .nofloat {
        float: none;
        padding: 10px 15px;
    }
}

@media (max-width:1200px) {
    .flex-container-inner {
        flex-direction: column !important;
    }

    .main-box {
        padding: 0px 0px 50px 0px !important;
        margin-bottom: 50px;
        border: none;
        border-bottom: 2px solid #859BC2
    }
}

.border-none {
    border: none;
    box-shadow: none;
}

.title-font-size {
    font-size: 22px !important;
    margin-left: -15px !important;
}

.external-providers {
    padding-top: 30px !important;
}

.external-provider {
    margin-bottom: 15px !important;
}





@media (max-width:768px) {
    .div2 {
        background-color: #000;
        line-height: 75px;
        font-size: 30px;
        justify-content: center;
        align-items: center;
    }

    .login-remember {
        display: flex;
        line-height: initial;
    }

        .login-remember label label {
            font-size: 18px !important;
        }

    .forgot-my-password {
        display: flex;
        line-height: initial;
        font-size: 18px !important;
    }

    .username {
        display: flex;
        line-height: initial;
        font-size: 15px !important;
    }

    .password {
        display: flex;
        line-height: initial;
        font-size: 15px !important;
    }

    .text-danger.login > ul {
        display: flex;
        line-height: initial;
        font-size: 18px !important;
    }

    .desktop-block {
        display: none;
    }
}

@media (min-width:768px) {
    .mobile-block {
        display: none;
    }
}





.btn-primary {
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

    .btn-primary:focus,
    .btn-primary.focus {
        color: #fff;
        background-color: #286090;
        border-color: #122b40;
    }

    .btn-primary:hover {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #fff;
        background-color: #286090;
        border-color: #204d74;
    }

        .btn-primary:active:hover,
        .btn-primary.active:hover,
        .open > .dropdown-toggle.btn-primary:hover,
        .btn-primary:active:focus,
        .btn-primary.active:focus,
        .open > .dropdown-toggle.btn-primary:focus,
        .btn-primary:active.focus,
        .btn-primary.active.focus,
        .open > .dropdown-toggle.btn-primary.focus {
            color: #fff;
            background-color: #204d74;
            border-color: #122b40;
        }

    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        background-image: none;
    }

    .btn-primary.disabled,
    .btn-primary[disabled],
    fieldset[disabled] .btn-primary,
    .btn-primary.disabled:hover,
    .btn-primary[disabled]:hover,
    fieldset[disabled] .btn-primary:hover,
    .btn-primary.disabled:focus,
    .btn-primary[disabled]:focus,
    fieldset[disabled] .btn-primary:focus,
    .btn-primary.disabled.focus,
    .btn-primary[disabled].focus,
    fieldset[disabled] .btn-primary.focus,
    .btn-primary.disabled:active,
    .btn-primary[disabled]:active,
    fieldset[disabled] .btn-primary:active,
    .btn-primary.disabled.active,
    .btn-primary[disabled].active,
    fieldset[disabled] .btn-primary.active {
        background-color: #337ab7;
        border-color: #2e6da4;
    }

    .btn-primary .badge {
        color: #337ab7;
        background-color: #fff;
    }