body {
  margin: 0;
  padding: 0;
}
div.backgroundContainer {
  position: fixed;
  left: 0;
  top: 0;
  overflow: hidden;
  z-index: 0;
  opacity: 1;
  width: 100%;
  height: 100%;
  -moz-transition: opacity 1s;
  -webkit-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  -webkit-transition-property: opacity;
  transition-property: opacity;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  background-color: whitesmoke;
}

img.backgroundImage {
  display: block;
  position: fixed;
  width: calc(100% - 400px);
  min-height: 100%;
  min-width: 400px;
  background-color: whitesmoke;
  pointer-events: none;
}

img.backgroundLogo {
  display: block;
  position: fixed;
  width: 20%;
  max-width: 300px;
  bottom: 4%;
  left: 4%;
  background-color: transparent;
  pointer-events: none;
}

div.loginPanel {
  background-image: url("../Content/images/ffffff/bgright.jpg");
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: bottom;
  background-color: #fff;
  background-size: cover;
  position: fixed;
  right: 0; /* ltr */
  float: right; /* ltr */
  height: 100%;
  width: 400px;
  /*max-width:60%;*/
  margin: 0;
  padding: 0;
  z-index: 1;
  overflow: visible;
  /*overflow-y: auto;
	overflow-x: hidden;*/
}

div.loginPanel:after {
  /*content: '';*/
  padding: 0;
  color: #333;
  position: absolute;
  left: -10px;
  bottom: 0;
  white-space: nowrap;
  z-index: 9999;
  height: 50px;
  width: 0;
  border: 0 solid transparent;
  border-right: 10px solid #fff;
  border-top: 16px solid transparent;
}

div.loginContainer {
  width: 100%;
  position: absolute;
  top: calc(50% - 135px);
}

div.loginContent {
  width: 330px;
  height: auto;
  margin: 0;
  margin-left: calc(50% - 165px);
}

span.loginTitle {
  font-weight: 500;
  font-size: 16px;
}

img.loginLogo {
  width: 200px;
  margin-left: 20px;
  margin-bottom: 16px;
  pointer-events: none;
}

.loginCompanyLogo {
  /*float:right;
    margin: 20px;*/
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media only screen and (min-width: 480px) and (max-width: 1280px) and (orientation: landscape) {
  .loginCompanyLogo {
    /*float: left;
        margin: 10px;*/
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
}

footer {
  width: 100%;
  height: 2em;
  margin-left: 6px;
  margin-right: 6px;
  position: absolute;
  bottom: 0;
  border-top: solid 1px #808080;
  font: normal 14px "Open Sans", Arial, Verdana;
}

.btnLoginFb,
.btnLoginLi {
  width: 100%;
  border: 0;
  margin-bottom: 5px;
  color: white;
  text-align: left;
}

.btnLoginFb i,
.btnLoginLi i {
  vertical-align: middle;
}

.btnLoginFb span,
.btnLoginLi span {
  font-size: 1.2em;
  vertical-align: middle;
  font-family: Arial;
  margin-left: 0.4em;
}

.btnLoginFb {
  background: #3b5998;
}

.btnLoginLi {
  background: #0e76a8;
}

@media only screen and (min-width: 1281px) {
    .mobile-login-content {
        background-image: url("images/Diseño Pyxoom Mobile INICIO-19 2-19.png");
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        position: relative;
        gap: 2rem;
    }
}

    @media only screen and (max-width: 1280px) {
        @media only screen and (max-width: 450px) and (orientation: portrait) {
            .loginDesktop {
                display: none
            }

            .loginMobile {
                display: block;
            }

            .mobile-image-header {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin-top: 2rem;
            }

            .mobile-login-content {
                background-image: url("images/login-bg-tablet.jpeg");
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                position: relative;
                gap: 2rem;
            }

            .mobile-login-logo {
                width: 160px;
                margin: 0 auto 40px;
                margin-top: 80px;
            }

            .mobile-login-form {
                width: 100%;
                max-width: 300px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 1rem;
            }

            .mobile-login-title {
                color: #003082;
                font-size: 14px;
                text-align: center;
                margin-bottom: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .form-control {
                width: 115% !important;
                height: 40px !important;
                border: 1px solid #003082 !important;
                border-radius: 4px !important;
                font-size: 14px !important;
                margin-bottom: 12px !important;
                padding: 0 15px !important;
                box-sizing: border-box !important;
                color: #555;
            }

            .mobile-login-btn {
                background-color: #003082;
                color: white;
                font-size: 14px;
                font-weight: normal;
                height: 28px;
                padding: 0 30px;
                border: none;
                border-radius: 20px;
                margin-bottom: 8px;
                min-width: 135px;
            }

            .mobile-recover-link {
                font-size: 12px;
                color: #003082;
                text-decoration: none;
                margin-top: 5px;
            }

            .mobile-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 56px;
                background-color: #003082;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                border: none;
            }

                .mobile-footer img {
                    height: 20px;
                }

            .loginContent {
                width: 80% !important;
                height: 150px !important;
                padding: 20px !important;
            }

            fieldset {
                padding-left: 0 !important;
            }

            div.loginContainer {
                width: 100%;
                position: absolute;
                top: calc(50% - 300px);
            }

            /* .backgroundContainer,
        .loginPanel,
        .loginContainer,
        .loginContent {
            display: none !important;
        } */
        }

        @media only screen and (max-width: 768px) and (orientation: portrait) {
            .loginDesktop {
                display: none
            }

            .loginMobile {
                display: block;
            }

            .mobile-image-header {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin-top: 2rem;
            }

            .mobile-login-content {
                background-image: url("images/login-bg-tablet.jpeg");
                width: 100%;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                position: relative;
                gap: 2rem;
            }

            .mobile-login-logo {
                width: 160px;
                margin: 0 auto 40px;
                margin-top: 80px;
            }

            .mobile-login-form {
                width: 100%;
                max-width: 300px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 1rem;
            }

            .mobile-login-title {
                color: #003082;
                font-size: 14px;
                text-align: center;
                margin-bottom: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .form-control {
                width: 115% !important;
                height: 40px !important;
                border: 1px solid #003082 !important;
                border-radius: 4px !important;
                font-size: 14px !important;
                margin-bottom: 12px !important;
                padding: 0 15px !important;
                box-sizing: border-box !important;
                color: #555;
            }

            .mobile-login-btn {
                background-color: #003082;
                color: white;
                font-size: 14px;
                font-weight: normal;
                height: 28px;
                padding: 0 30px;
                border: none;
                border-radius: 20px;
                margin-bottom: 8px;
                min-width: 135px;
            }

            .mobile-recover-link {
                font-size: 12px;
                color: #003082;
                text-decoration: none;
                margin-top: 5px;
            }

            .mobile-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 56px;
                background-color: #003082;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                border: none;
            }

                .mobile-footer img {
                    height: 20px;
                }

            .loginContent {
                width: 80% !important;
                height: 150px !important;
                padding: 20px !important;
            }

            fieldset {
                padding-left: 0 !important;
            }

            div.loginContainer {
                width: 100%;
                position: absolute;
                top: calc(50% - 300px);
            }

            /* .backgroundContainer,
        .loginPanel,
        .loginContainer,
        .loginContent {
            display: none !important;
        } */
        }

        @media only screen and (max-width: 820px) and (orientation: portrait) {
            .loginDesktop {
                display: none
            }

            .loginMobile {
                display: block;
            }

            .mobile-image-header {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin-top: 2rem;
            }

            .mobile-login-content {
                background-image: url("images/login-bg-tablet.jpeg");
                width: 100%;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                position: relative;
                gap: 2rem;
            }

            .mobile-login-logo {
                width: 160px;
                margin: 0 auto 40px;
                margin-top: 80px;
            }

            .mobile-login-form {
                width: 100%;
                max-width: 300px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 1rem;
            }

            .mobile-login-title {
                color: #003082;
                font-size: 14px;
                text-align: center;
                margin-bottom: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .form-control {
                width: 115% !important;
                height: 40px !important;
                border: 1px solid #003082 !important;
                border-radius: 4px !important;
                font-size: 14px !important;
                margin-bottom: 12px !important;
                padding: 0 15px !important;
                box-sizing: border-box !important;
                color: #555;
            }

            .mobile-login-btn {
                background-color: #003082;
                color: white;
                font-size: 14px;
                font-weight: normal;
                height: 28px;
                padding: 0 30px;
                border: none;
                border-radius: 20px;
                margin-bottom: 8px;
                min-width: 135px;
            }

            .mobile-recover-link {
                font-size: 12px;
                color: #003082;
                text-decoration: none;
                margin-top: 5px;
            }

            .mobile-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 56px;
                background-color: #003082;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                border: none;
            }

                .mobile-footer img {
                    height: 20px;
                }

            .loginContent {
                width: 80% !important;
                height: 150px !important;
                padding: 20px !important;
            }

            fieldset {
                padding-left: 0 !important;
            }

            div.loginContainer {
                width: 100%;
                position: absolute;
                top: calc(50% - 300px);
            }

            /* .backgroundContainer,
        .loginPanel,
        .loginContainer,
        .loginContent {
            display: none !important;
        } */
        }

        @media only screen and (max-width: 1024px) and (orientation: portrait) {
            .loginDesktop {
                display: none
            }

            .loginMobile {
                display: block;
            }

            .mobile-image-header {
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin-top: 2rem;
            }

            .mobile-login-content {
                background-image: url("images/login-bg-tablet.jpeg");
                width: 100%;
                min-height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                position: relative;
                gap: 2rem;
            }

            .mobile-login-logo {
                width: 160px;
                margin: 0 auto 40px;
                margin-top: 80px;
            }

            .mobile-login-form {
                width: 100%;
                max-width: 300px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 1rem;
            }

            .mobile-login-title {
                color: #003082;
                font-size: 14px;
                text-align: center;
                margin-bottom: 1.5rem;
                font-weight: 600;
                letter-spacing: 0.5px;
            }

            .form-control {
                width: 115% !important;
                height: 40px !important;
                border: 1px solid #003082 !important;
                border-radius: 4px !important;
                font-size: 14px !important;
                margin-bottom: 12px !important;
                padding: 0 15px !important;
                box-sizing: border-box !important;
                color: #555;
            }

            .mobile-login-btn {
                background-color: #003082;
                color: white;
                font-size: 14px;
                font-weight: normal;
                height: 28px;
                padding: 0 30px;
                border: none;
                border-radius: 20px;
                margin-bottom: 8px;
                min-width: 135px;
            }

            .mobile-recover-link {
                font-size: 12px;
                color: #003082;
                text-decoration: none;
                margin-top: 5px;
            }

            .mobile-footer {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 56px;
                background-color: #003082;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
                border: none;
            }

                .mobile-footer img {
                    height: 20px;
                }

            .loginContent {
                width: 80% !important;
                height: 150px !important;
                padding: 20px !important;
            }

            fieldset {
                padding-left: 0 !important;
            }

            div.loginContainer {
                width: 100%;
                position: absolute;
                top: calc(50% - 300px);
            }

            /* .backgroundContainer,
        .loginPanel,
        .loginContainer,
        .loginContent {
            display: none !important;
        } */
        }

        .loginPanel {
            align-items: center;
        }

        .loginContainer {
            text-align: center;
            align-items: center;
        }

        .loginContent {
            width: 80% !important;
            height: 150px !important;
            padding: 20px !important;
            margin-left: 10% !important; /*40px !important;*/
        }

        #password {
            width: 100%;
        }

        .form-control {
            width: 100% !important;
            text-align: center;
        }

        fieldset {
            /*padding: 0 30px 0 30px !important;*/
            padding-left: 50px;
        }

        footer {
            text-align: center;
        }
    }

    @media only screen and (max-width: 1280px) and (orientation: landscape) {
        .loginMobile {
            display: none;
        }

        .loginDesktop {
            display: block;
        }

        .loginLogo {
            width: 40% !important;
        }

        span.ui-button-text {
            height: 12px !important;
            font-size: 13px !important;
        }

        span.field-validation-error {
            font-size: 14px !important;
        }

        .loginPanel {
            align-items: center;
        }

        .loginContainer {
            text-align: center;
            align-items: center;
        }

        .loginContent {
            width: 100% !important;
            padding: 0px !important;
            margin-left: 0 !important;
        }

        #txtUser {
            height: 100%;
            width: 100%;
        }

        #txtPass {
            height: 100%;
            width: 100%;
        }

        /*
#password {
    height: 80%;
    width: 100%;
}
    */

        .form-control {
            width: 88% !important;
            text-align: left;
        }

        fieldset {
            padding: 0 30px !important;
        }

        footer {
            text-align: center;
        }

        .btnLoginFb span,
        .btnLoginLi span {
            font-size: 1em;
            vertical-align: middle;
            font-family: Arial;
            margin-left: 0.4em;
        }

        span.loginTitle {
            font-weight: 500;
            font-size: 13px;
        }
    }

    @media only screen and (min-width: 1281px) and (orientation: landscape) {
        .loginMobile {
            display: none;
        }

        .loginDesktop {
            display: block;
        }
    }
    /* Bootstrap Captcha */
    .bsCaptchaDiv li {
        list-style-type: none;
    }

    .bsCaptchaDiv {
        background: none;
    }

    .bsCaptchaTarget {
        border: 0px none white;
    }

    .row-fluid.bsCaptchaDiv ul.span12.text-center.text-center {
        text-align: center;
        padding: 0px;
    }

    .row-fluid.bsCaptchaDiv hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border-top-color: currentcolor;
        border-top-style: none;
        border-top-width: 0px;
        border-top: 1px solid #eeeeee;
    }

    #bsCaptchaTarget {
        background: none;
        padding: 0px 0px 0px 0px;
        text-align: center;
    }

    .well {
        min-height: 20px;
        padding: 19px;
        margin-bottom: 20px;
        background-color: none;
        border: 1px solid #e3e3e3;
        border-radius: 0px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    }

    .alert-danger {
        background-color: none;
        border-color: #ebccd1;
        color: #a94442;
    }

    .alert {
        padding: 15px;
        margin-bottom: 10px;
        border: 0px solid transparent;
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 0px;
    }

    .fa-2x {
        font-size: 1.4em !important;
    }

    #bsInstructions li,
    #bsWhat,
    #bsCaptchaError,
    #bsTargetSpan {
        font-size: 12px !important;
    }

    /*.ui-widget {
    font-size: 0.9em;
}

.btnLoginFb, .btnLoginLi {
    font-size: 0.8em;
}*/