:root {
    --azul-entel: #002EFF !important;
    --azul-empresas: #10069F !important;
    --naranjo-entel: #FF3D00 !important;
    --verde-eco: #42E8B4 !important;
    --verde-eco-light: #A0F3D9 !important;
    --gray600: #66686C !important;
    --gray200: #D7D7D7 !important;
    --gray100: #E9E9E9 !important;
    --gray010: #F7F7F7 !important;
    --disable: #e7e7e7 !important;
    --azul-entel-dark: #0022bf !important;
    --black: #000000 !important;
    --white: #FFFFFF !important;
    --warning: #ffba00 !important;
    --error: #dd200e !important;
    --primary: var( --azul-entel);
    --secondary: var( --azul-empresas);
    --complementary: var( --naranjo-entel);
    --highlight: var( --verde-eco);
    --highlight-light: var( --verde-eco-light);
    --primary-dark: var( --azul-entel-dark);
    --primary-title: "Mesa de Operaciones Cloud Empresas";
    --primary-font: 'Barlow', sans-serif;
    --image-fondo: url( 'https://moce.cl/2023/wp-content/uploads/2024/02/imagen-moce1.jpg');
    --image-logo: url( 'https://www.entel.cl/empresas/assets-empresas/components/menu-homologado-dic-2022/assets/images/svg/logo-entel-new.svg?v=3.0');
    --image-logo-2: url( 'https://moce.cl/titrackmoce/logo-entel.svg');
} 
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800;900&display=swap');

html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family:var(--primary-font);
   font-variant-ligatures: no-common-ligatures;
}




html body > .container, html #divContenedor, .navbar.navbar-inverse.navbar-fixed-top .container {
    background-color: white;
    box-shadow: 0px 0px 10px 3px rgb(0 0 0 / 3%);
    border-radius: 12px;
    overflow: hidden;
    z-index: 2;
    }
html body {
    padding-top: 0px !important;
    padding-left: 0;
    background: #f2f2f2;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 100vh;
    margin: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
    html body .navbar.navbar-inverse.navbar-fixed-top {
        width: 100%;
        position: absolute !important;
        background-color: transparent !important;
        /* background-image: url(https://www.tibox.cl/website-tibox/wp-content/uploads/2021/01/logotibox-color.svg);*/
        background-image: url(https://miperfil.entel.cl/CL_Web_Login_Personas_RES/img/new_background_desktop.png?1781);
        background-position: left;
        background-repeat: no-repeat;
        max-width: 600px;
        margin: 0;
        padding-top: 0;
        /* height: 84px; */
        background: #ffffff;
        /* max-width: 100%; */
        margin-top: -77px;
        z-index: 2;
        top: 0;
        height: 106px;
        display: none;
    }

html body section#loginForm .control-label {
    width: 100%;
    padding-bottom: 0;
    letter-spacing: 0.03em;
}
    html body section#loginForm input.form-control {
        height: 44px;
        padding: 21px 10px;
        font-size: 16px;
        line-height: 1;
        max-width: 100%;
        float: left;
        position: relative;
        display: block;
        margin: 0 auto 31px auto;
        width: 100%;
        height: 35px;
        background-color: red !important;
        border: 0;
        border: 1px solid #bebebe;
        outline: none;
        font-family: 'Barlow',sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #666;
        box-shadow: 0;
        -webkit-box-shadow: 0 0 0px 1000px #fff inset;
        box-shadow: 0 0 0px 1000px #f9f6f6 inset;
        border-radius: 0;
        margin-top: 8px;
        /* padding-left: 40px; */
        border-radius: 8px;
    }
html body .navbar.navbar-inverse.navbar-fixed-top .container .navbar-collapse.collapse {
    display: none !important;
}
html body a.navbar-brand {
    opacity: 0;
    margin: 0 !important;
}
html body .container.body-content > h2 {
    padding-top: 30px !important;
    display: block;
    font-size: 0;
    /* text-align: center; */
    padding-left: 0px;
    margin-top: 10px;
    }
    html body .navbar.navbar-inverse.navbar-fixed-top .container {
        background-color: transparent;
        background-image: url(https://www.tibox.cl/website-tibox/wp-content/uploads/2021/01/logotibox-color.svg);
        background-image: var(--image-logo);
        background-position: 0 -10px;
        background-repeat: no-repeat;
        background-size: 172px 82px;
        margin-top: 11px;
        height: 51px;
        margin-bottom: 15px;
        box-shadow: none;
        width: 100%;
        padding-left: 0 !important;
        padding-top: 60px;
    }
html body .navbar.navbar-inverse.navbar-fixed-top .container:after {
    color: #FFFFFF;
    font-size: 21px;
    min-height: 60px;
    line-height: 52px;
    width: 410px;
    content: var(--primary-title);
    padding-top: 0;
    text-align: left;
    display: block;
    width: 100%;
    padding-bottom: 0;
}

html body section#loginForm h4:before {
    content: "Ingresa tus datos a continuación";
    font-size: 16px !important;
    letter-spacing: 0.03em;
    margin-bottom: 14px;
    display: block;
    font-weight: 400;
}
html body .container.body-content {
    padding-left: 45px;
    padding-right: 45px;
}

html body footer p {
    font-size: 13px;
    color: #686868;
    margin: 0;
    }

html body footer {
    background: #f7f7f7;
    padding: 20px;
    text-align: center;
    margin-left: -45px;
    margin-right: -45px;
}

html body footer:before {

    color: white;
}

html body h4:before {
    content: "Inicie sesión con su cuenta.";
    font-size: 0;
    line-height: 1.6;
}
html body section#loginForm h4 {
    font-size: 0 !important;
    text-align: left;
    }
html body .container.body-content > h2:before {
    content: "Iniciar sesión";
        /* color: #0048fb; */
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-weight: 700;
    letter-spacing: 0px;
    orphans: 2;
    text-align: start;
    text-indent: 0px;
    text-transform: none;
    white-space: normal;
    widows: 2;
    word-spacing: 0px;
    -webkit-text-stroke-width: 0px;
    background-color: rgb(255, 255, 255);
    text-decoration-thickness: initial;
    text-decoration-style: initial;
    text-decoration-color: initial;
    float: none;
    display: inline;
    font-family: helvetica, sans-serif;
    font-size: 23px;
}

html body section#loginForm .control-label {
    font-size: 13px;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
    /* padding: 20px; */
    }

html body section#loginForm .control-label:before {
    font-size: 0;
    content: "Rut Sin puntos y con guión";
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.03em;
}

html body .navbar-inverse .navbar-toggle {
    opacity: 0;
    display: none !important;
}

html body div#divLogo {
    /* opacity: 0 !important; */
    /* display: none; */
}

footer.col-sm-12.col-md-12.col-lg-12 {float: none;width: auto !important;background-size: 93%;background-repeat: no-repeat;background-position: center 24px;margin-top: 20px;}

html .col-md-10 {width: 100%;position: relative;}

form.normal {/* padding: 20px; */}

section#loginForm {padding: 0 0px;/* max-width: 400px; */margin: 30px auto;}

input.btn.btn-default {
    font-size: 14px !important;
    background-color: #025cff;
    color: white !important;
    font-weight: 600!important;
    height: 42px!important;
    border-radius: 38px!important;
    font-size: 15px!important;
    width: 169px !important;
    background: var(--azul-empresas);
    border: 0;
    color: #fff!important;
    padding: 9px 20px!important;
    }

.col-md-offset-2.col-md-10 {margin: 0 !important;width: 100%;text-align: center;}

html body section#loginForm input.form-control:focus, html body section#loginForm input.form-control:hover, html body section#loginForm input.form-control:active {border-bottom: 1px solid #0062ef;}

html body section#loginForm input.form-control.input-validation-error {border-bottom: 1px solid #ef0000;}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid white;
  -webkit-text-fill-color: #4a4a4a;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
  transition: background-color 5000s ease-in-out 0s;
}

.col-md-offset-2.col-md-10:before {/* content: "Ingresar"; */}

html body footer p a {color: #838383;}

hr {
    display: none;
}

body.service-desk-index:before, body.service-desk-index:after {
    content: "";
    height: 100vh;
    position: absolute;
    top: 0;
    width: 40%;
    display: block;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
}


body.service-desk-index:after {background: var(--azul-empresas);left: 0;/* background-image: linear-gradient(to left bottom, #1105bf, #1105b9, #1106b3, #1006ad, #1006a7, #1006a0, #0f0798, #0f0791, #0e0787, #0e077d, #0e0773, #0d0769); */background-color: #f3f5ff;}


html body .navbar.navbar-inverse.navbar-fixed-top:before, html body .navbar.navbar-inverse.navbar-fixed-top .container, html body .container.body-content {
    max-width: 409px;
    left: 20%;
    padding-left: 45px;
    padding-right: 45px;
    text-align: left;
    font-family: var(--primary-font);
    margin-left: -200px;
    position: absolute;
    width: 400px;
    overflow: visible;
    margin-top: 120px;
}

body.service-desk-index * {
    /* font-family: var(--primary-font); */
}
body.service-desk-index:before {right: 0;background-image: var(--image-fondo);width: 65%;background-color: white;background-position: 73% center;}

input.btn.btn-default:hover {
    background: var(--azul-empresas);
}
section#loginForm form .form-group:nth-child(4) .col-md-10:before,
section#loginForm form .form-group:nth-child(5) .col-md-10:before {
    /*background: red;*/
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    left: 11px;
    top: 19px;
    z-index: 14;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\f2c0";
    color: black;
}

section#loginForm form {
    display: flex;
    flex-direction: column;
}
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

@media(min-width: 992px) {

}
@media(max-width: 1500px) {

body.service-desk-index:before, body.service-desk-index:after {
width: 40%;
}
body.service-desk-index:before {
width: 60%;
}
  
}
@media(max-width: 1300px) {

body.service-desk-index:before, body.service-desk-index:after {
width: 45%;
}
body.service-desk-index:before {
width: 55%;
}
  
}
@media(max-width: 991px) {
html body .navbar.navbar-inverse.navbar-fixed-top:before, 
html body .navbar.navbar-inverse.navbar-fixed-top .container, 
html body .container.body-content {
    margin-left: auto;
    padding-left: 25px;
    /* padding-right: 25px !important; */
    margin-right: auto;
    width: 100%;
    left: 0;
    position: relative;
}
  html body {
    padding-right: 25px;
    padding-left: 25px;
    /* display: block; */
}
body.service-desk-index:before, body.service-desk-index:after {width: 100%;}
body.service-desk-index:before {width: 0;}



}

@media (max-width: 568px) {
html body .navbar.navbar-inverse.navbar-fixed-top:before, 
html body .navbar.navbar-inverse.navbar-fixed-top .container, 
html body .container.body-content {
    width: 100%;
    max-width: 100%;
}
  html body .container.body-content:after {
    font-size: 18px !important;
}
}


html .col-md-10 {}

html body .container.body-content:before {
    content: "";
}
html body .container.body-content:before {
    background-color: transparent;
    background-image: var(--image-logo);
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    margin-top: 11px;
    height: 49px;
    margin-bottom: 15px;
    box-shadow: none;
    width: 100%;
    padding-left: 0 !important;
    padding-top: 13px;
    content: "";
    content: "";
    display: block;
    position: absolute;
    top: -117px;
    left: 0;
}
html body .container.body-content:after {
    color: #000000;
    font-size: 21px;
    min-height: 60px;
    line-height: 52px;
    width: 410px;
    content: var(--primary-title);
    padding-top: 0;
    text-align: left;
    display: block;
    width: 100%;
    padding-bottom: 0;
    position: absolute;
    top: -60px;
    z-index: 222222;
    left: 0;
}