﻿/*Definición de estilos cargador(Loading)*/
/*Definición de estilos cargador(Loading)*/
.lds-spinner {
    color: #008200;
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    top: 0px;
}
.lds-spinner div {transform-origin: 32px 32px;animation: lds-spinner 1.2s linear infinite;}
.lds-spinner div:after {
   content: " ";
   display: block;
   position: absolute;
   top: 3px;
   left: 29px;
   width: 5px;
   height: 14px;
   border-radius: 20%;
   background: #008200;
}
.lds-spinner div:nth-child(1) {transform: rotate(0deg);animation-delay: -1.1s;}
.lds-spinner div:nth-child(2) {transform: rotate(30deg);animation-delay: -1s;}
.lds-spinner div:nth-child(3) {transform: rotate(60deg);animation-delay: -0.9s;}
.lds-spinner div:nth-child(4) {transform: rotate(90deg);animation-delay: -0.8s;}
.lds-spinner div:nth-child(5) {transform: rotate(120deg);animation-delay: -0.7s;}
.lds-spinner div:nth-child(6) {transform: rotate(150deg);animation-delay: -0.6s;}
.lds-spinner div:nth-child(7) {transform: rotate(180deg);animation-delay: -0.5s;}
.lds-spinner div:nth-child(8) {transform: rotate(210deg);animation-delay: -0.4s;}
.lds-spinner div:nth-child(9) {transform: rotate(240deg);animation-delay: -0.3s;}
.lds-spinner div:nth-child(10) {transform: rotate(270deg);animation-delay: -0.2s;}
.lds-spinner div:nth-child(11) {transform: rotate(300deg);animation-delay: -0.1s;}
.lds-spinner div:nth-child(12) {transform: rotate(330deg);animation-delay: 0s;}
@keyframes lds-spinner { 0% { opacity: 1;}100% {opacity: 0;}}
/*Termina definición de estilos cargador(Loading)*/

.wrapper {margin-top: 80px; margin-bottom: 80px;}
input[type="text"] {margin-bottom: -1px;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
input[type="password"] {margin-bottom: 20px;border-top-left-radius: 0;border-top-right-radius: 0;}
.loginSite {height: 516px;width: 414px;left: 50%;top: 50%; padding: 28px;margin: 0px auto;}
#modalBackgroudSiteControlSite {opacity:0.4}
#mdlLoadingSite {z-index: 9999;}

.loginSite {
    background: #fefefe;
    border: 1px solid #C3D4DB;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: rgba(0,0,0,0.15) 0 0 1px;
    -webkit-box-shadow: rgba(0,0,0,0.15) 0 0 1px;
    box-shadow: rgba(0,0,0,0.15) 0 0 1px;
    color: #444;
    font: normal 12px/14px Arial, Helvetica, Sans-serif;
    margin: 0px auto;
    overflow: hidden;
}
.btn2 {
        display: inline-block !important;
        font-weight: 400 !important;
        text-align: center !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
        border: 1px solid transparent !important;
        padding: 0.375rem 0.75rem !important;
        font-size: 0.9375rem !important;
        line-height: 1.5 !important;
        border-radius: 0 !important;
        -webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out !important;
}
.btn-secondary2 {color: #fff !important;background-color: #373a3c !important; border-color: #373a3c !important;}
@media (max-width: 768px) and (min-width: 0px) {.loginSite { margin: 0px 4%; margin-top:30px;} .formDireccionCiudad { margin-top:30px;}}
.requiredfrm:after{content: "  *  ";color: #ff0000;font-size: 13px;}
.footerbtn { display: inline;}
.not-allowed { pointer-events: auto! important; pointer-events: none;cursor: not-allowed! important;opacity: 0.98;}
.not-allowedControl{pointer-events: none;cursor: not-allowed! important;opacity: 0.92;}
.not-allowedControlInput{pointer-events: none;cursor: not-allowed! important;opacity: 0.48;background-color:#eff0f1;}
.not-allowedControlButton{pointer-events: none;cursor: not-allowed! important;opacity: 0.70;}
.not-allowedControlItem{pointer-events: auto! important;pointer-events: none;cursor: not-allowed! important;opacity:0.48;}
.infoRecuadro {text-align: center;margin-top: 28px;margin-bottom: 28px;}
.infoFormControl { float:left;}
.infoFormEspacio {-webkit-box-flex: 0;-ms-flex: 0 0 3.3333333333%;flex: 0 0 3.3333333333%;max-width: 3.3333333333%; margin-right: 7px;margin-left: 7px;margin-top: 11px;text-align: center;}
.infoFormControlEspacios { margin-right:8px;}
.infoFormControlInput {max-width: 45px; height: calc(2.15625rem + 2px);min-width: 44px;}
.infoFormControlSelect {max-width: 70px; min-width: 44px;padding: 0.2rem 0.1rem;}
.infoFormControlSelectCardinal {max-width: 100px;min-width: 57px!important;padding: 0.08rem 0.08rem;}
.paddingform{ padding-left:0px;}
#divPrincipalLogin,#divPrincipalAcceso,#divPrincipalDatosBasicos,.espacioForm{margin-top:2%;}
.alert-ModalMensaje {margin-top:2%;}
.csspaneles {min-height: 322px;}
.cssMensajeObligatorio {clear:both;}
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100);

body {font-family: 'Roboto', sans-serif;}
.login-card,.loginOTP-card {
  padding: 40px;
  padding-bottom: 15px;
  width: 350px;
  background-color: #F7F7F7;
  margin: 0 auto 10px;
  border-radius: 2px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.login-card h1,.loginOTP-card h1 {
  font-weight: 100;
  text-align: center;
  font-size: 2.3em;
  margin-top: -15px;
}
.login-card input[type=submit], .loginOTP-card input[type=submit]{
  width: 100%;
  display: block;
  margin-bottom: 10px;
  position: relative;
}
.login-card input[type=text],
.login-card input[type=password],
.loginSiteOTP input[type=text],
.loginOTP-card input[type=submit],
.cssDatosBasicosLogin input[type=text]
{
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 5px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}

.cssDatosBasicosLogin select{
  height: 44px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.cssDatosBasicosLogin select:hover{
  border: 1px solid #0f1f6770;
  border-top: 1px solid #0f1f6770;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}

.login-card input[type=text]:hover, 
input[type=password]:hover,
.loginSiteOTP input[type=text]:hover,
.loginOTP-card input[type=submit]:hover,
.cssDatosBasicosLogin input[type=text]:hover
{
  border: 1px solid #0f1f6770;
  border-top: 1px solid #0f1f6770;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}

.login {
  text-align: center;
  font-size: 14px;
  font-family: 'Arial', sans-serif;
  font-weight: 700;
  height: 36px;
  padding: 0 8px;
}

.login-submit {
  border: 0px;
  margin:0px!important;
  color: #fff!important;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #0f1f67!important;
}

.login-submit:hover {
  border: 0px;
  text-shadow: 0 1px rgba(0,0,0,0.3)!important;
  background-color: #1f2021!important;
}

.login-card a{
  text-decoration: none;
  color: #999!important;
  font-weight: 400;
  text-align: center;
  display: contents;
  opacity: 0.6;
  transition: opacity ease 0.5s;
}

.login-card a:hover {opacity: 1;}
.login-help {width: 100%;text-align: center;font-size: 12px;}
.btn-primary {
    color: #b6b6b6;
    background-color: #f7f7f7;
    border-color: #b6b6b6;
    border-radius: 10px;
}
.btn-primary:hover {color: #fff;background-color: #1f2021;border-color: #1f2021;}
button {min-width: 3em;}    
/*********Nuevo Home***********/
#contentBox {margin-top: 11px!important;}
.columnsContainer { position: relative;border-bottom: 1px solid  #ccc; /*margin: 0 auto; width:80%*/ }
.leftColumn, .rightColumn{   padding: 1.25em; }
.leftColumn { 
    background: #f2f2f2; 
    background: rgba(235,232,235,1);
    background: -moz-linear-gradient(left, rgba(235,232,235,1) 0%, rgba(235,232,235,1) 91%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(235,232,235,1)), color-stop(91%, rgba(235,232,235,1)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(235,232,235,1) 0%, rgba(235,232,235,1) 91%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(235,232,235,1) 0%, rgba(235,232,235,1) 91%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(235,232,235,1) 0%, rgba(235,232,235,1) 91%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(235,232,235,1) 0%, rgba(235,232,235,1) 91%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebe8eb', endColorstr='#ffffff', GradientType=1 );
}
.box{
    border: 0px solid #dfe5f9;
    border-radius: 4px;
    box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}
.boxBody {
    background: #fefefe;
    border-top: 0px solid #dfe5f9;
    border-bottom: 0px solid #dfe5f9;
    padding: 10px 20px;
    box-shadow: 0 5px 8px 0 rgba(0,0,0,.1);               
}
/* MEDIA QUERIES */
@media screen and (min-width: 47.5em ) {
                .leftColumn { /*margin-right: 49.5em; */width: 50%; }
                .rightColumn { position: absolute; top: 131px; right: 0; width: 50%; }   
}

.box input[type=text], .box input[type=password], .txtField, .cjComboBox{
                border: 2px solid #F7F9FA;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50);
    padding: 15px 25px;   
    width: 301px;
}
.box input[type=text]:hover,
.box input[type=password]:hover,
.txtField:hover,
.cjComboBox:hover{background: #f2f2f2;color: #414848;}
.box input[type=text]:focus,
.box input[type=password]:focus,
.txtField:focus,
.cjComboBox:focus
{
    border:2px solid #fff;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
                color:#333;
}

h1{
    color: #7E7E7E;
    font: bold 25px Helvetica, Arial, sans-serif;
    letter-spacing: -0.05em;
    line-height: 30px;
    margin: 10px 0 30px;
    text-align:center;
}
input:-internal-autofill-selected {
    background-color: #fff !important;
    background-image: none !important;
    color: rgb(0, 0, 0) !important;
}

/*****Derecha******/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
ul#tabs-list {
  list-style: none;
  text-align: center;
  border-bottom: 1px solid #dfdfdf;
  margin: 0;
  padding: 0;
}

label.panel-label {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: block;
  width: 100%;
  color: #7E7E7E;
  cursor: pointer;
  background-color: #ecf0f1;
  transition-property: background-color, color;
  transition-duration: 200ms;
}
label.panel-label:hover {color: #0f1f67;}
#panels {background-color: white;}
#panels .container {margin: 0 auto; width: 90%;}
#panels section header label.panel-label {padding: 12px 24px;box-sizing: border-box;}
#panels section main {
  box-sizing: border-box;
  max-height: 0;
  opacity: 0;
  transition: opacity 600ms;
  overflow-y: hidden;
}

#panel-1-ctrl:checked ~ #panels #panel-1 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-2-ctrl:checked ~ #panels #panel-2 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-3-ctrl:checked ~ #panels #panel-3 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-4-ctrl:checked ~ #panels #panel-4 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

#panel-5-ctrl:checked ~ #panels #panel-5 main {
  max-height: initial;
  opacity: 1;
  padding: 48px 24px;
}

@media all and (max-width: 767px) {
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-4 {
    max-height: 46px;
    opacity: 1;
  }
  #nav-ctrl:checked ~ #tabs-list #li-for-panel-5 {
    max-height: 46px;
    opacity: 1;
  }
  #open-nav-label {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
  }
  #nav-ctrl:checked ~ #tabs-list #open-nav-label {display: none;}
  #close-nav-label {
    display: block;
    max-height: 0;
    overflow-y: hidden;
    background-color: #444444;
    color: #ecf0f1;
    padding: 0px;
    transition: max-height 200ms;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 12px;
    line-height: 22px;
    letter-spacing: 1px;
  }
  #nav-ctrl:checked ~ #tabs-list #close-nav-label {
    max-height: 36px;
    opacity: 1;
    padding: 12px 24px;
  }
  #tabs-list {position: relative;}
  #tabs-list label.panel-label {padding: 12px 0;}
  #tabs-list #li-for-panel-1 {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-2 {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-3 {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-4 {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 200ms;
  }
  #tabs-list #li-for-panel-5 {max-height: 0;overflow-y: hidden;transition: max-height 200ms;}
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {max-height: 46px;opacity: 1;}
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    background-color: white;
    color: #0f1f67;
    background-color: #0f1f67;
    color: white;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {max-height: 46px;opacity: 1;}
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    background-color: white;
    color: #0f1f67;
    background-color: #0f1f67;
    color: white;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    max-height: 46px;
    opacity: 1;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    background-color: white;
    color: #0f1f67;
    background-color: #0f1f67;
    color: white;
  }
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
    max-height: 46px;
    opacity: 1;
  }
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
    background-color: white;
    color: #0f1f67;
    background-color: #0f1f67;
    color: white;
  }
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {max-height: 46px;opacity: 1;}
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
    background-color: white;
    color: #0f1f67;
    background-color: #0f1f67;
    color: white;
  }
  #panels .container {width: 100%;}
  #panels section header {display: block;}
}
@media all and (min-width: 768px) {
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
            transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1.last {border-right: 1px solid transparent;}
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {border-left: 1px solid #dfdfdf;}
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    background-color: white;
    color: #0f1f67;
    padding-top: 26px;
  }
  #panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label::after {height: 6px;}
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
            transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2.last {border-right: 1px solid transparent;}
 #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {border-left: 1px solid #dfdfdf;}
 #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    background-color: white;
    color: #0f1f67;
    padding-top: 26px;
  }
  #panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label::after {height: 6px;}
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
            transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3.last {border-right: 1px solid transparent;}
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {border-left: 1px solid #dfdfdf;}
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    background-color: white;
    color: #0f1f67;
    padding-top: 26px;
  }
  #panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label::after {height: 6px;}
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
            transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
  }
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4.last {border-right: 1px solid transparent;}
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 + li {border-left: 1px solid #dfdfdf;}
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label {
    background-color: white;
    color: #0f1f67;
    padding-top: 26px;
  }
  #panel-4-ctrl:checked ~ #tabs-list #li-for-panel-4 label.panel-label::after {height: 6px;}
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 {
    pointer-events: none;
    cursor: default;
    -webkit-transform: translate3d(0, 1px, 0);
            transform: translate3d(0, 1px, 0);
    box-shadow: none;
    border-right: none;
  }
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5.last {border-right: 1px solid transparent;}
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 + li {border-left: 1px solid #dfdfdf;}
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label {
    background-color: white;
    color: #0f1f67;
    padding-top: 26px;
  }
  #panel-5-ctrl:checked ~ #tabs-list #li-for-panel-5 label.panel-label::after {height: 6px;  }
  ul#tabs-list {text-align: center;border-bottom: 1px solid #dfdfdf;}
  ul#tabs-list li {
    display: inline-block;
    text-align: center;
    font-size: 0.875em;
    width: 18%;
    box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
    border-right: 1px solid #dfdfdf;
    position: relative;
  }
  ul#tabs-list li:hover {transition: none;border-right: none;  }
  ul#tabs-list li:hover.last {border-right: 1px solid transparent;  }
  ul#tabs-list li:hover + li {border-left: 1px solid #dfdfdf;}
  ul#tabs-list li label.panel-label {position: relative; padding: 24px 0;}
  ul#tabs-list li label.panel-label::after {
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    background-color: #0f1f67;
    height: 0;
    transition-property: height;
    transition-duration: 200ms;
  }
  ul#tabs-list li label.panel-label:hover {padding-top: 25px;}
  ul#tabs-list li label.panel-label:hover::after {height: 6px;}
  #open-nav-label, #close-nav-label {display: none;}
  #nav-ctrl {display: none;}
}
@media all and (min-width: 900px) { main {width: 70%;margin: 0 auto;}}
.panel-radios {position: fixed;left: 50%;top: 10px;width: 20px;opacity: 0.5;z-index: 99;}
.panel-radios:nth-child(1) {-webkit-transform: translateX(-50px);transform: translateX(-50px);}
.panel-radios:nth-child(2) {-webkit-transform: translateX(-30px);transform: translateX(-30px);}
.panel-radios:nth-child(3) {-webkit-transform: translateX(-10px);transform: translateX(-10px);}
.panel-radios:nth-child(4) {-webkit-transform: translateX(10px);transform: translateX(10px);}
.panel-radios:nth-child(5) {-webkit-transform: translateX(30px);transform: translateX(30px);}
.panel-radios:nth-child(6) {top: 30px;-webkit-transform: translateX(-10px);transform: translateX(-10px);display: block;}
body {background: #f2f2f2;color: #444444;font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;}
#introduction {width: 90%; margin: 0 auto;padding: 5px 24px;color: #7E7E7E;}
#introduction h1 {font-weight: 300;text-align: center;}
label {display: inline-block;margin-bottom: 0rem!important;}
main h1 { margin-top: 0;font-weight: 300;color: #0f1f67;}
main p {line-height: 1.8;}
main hr {margin: 12px 0;border-top: 1px solid #dfdfdf;}
label.demo-label {
  background-color: #0f1f67;
  color: white;
  padding: 4px 8px;
  border-radius: 2px;
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
label.demo-label:hover {background-color: #f2f2f2;}
#demo-child-toggle {display: none;}
#demo-child-toggle:checked ~ #demo-parent #demo-child {color: #0f1f67;font-weight: bold;text-transform: uppercase;}
#demo-parent {margin-top: 8px;}
code,pre {
  color: #0f1f67;
  font-family: Inconsolata, "Andale Mono", Andale, monowidth;
  background-color: #ecf0f1;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
}
code {padding: 2px 6px;}
pre {padding: 12px;line-height: 1.6;}
pre strong {color: #444444;font-weight: normal;}
input[type="radio"], input[type="checkbox"] {display: none;}
.demo-header {display: none;}
.cssCodigoValidacion {font-size:14px;}
.login-submit{font-size: 14px !important;}
.otpClicDatos{
    text-decoration: none;
    color: #0f1f67!important;
    font-weight: 400;
    text-align: center;
    display: contents;
    opacity: 0.6;
    transition: opacity ease 0.5s;
}
.otpClicDatos:hover {opacity: 1;}
.modal-backdrop {opacity: 0.5;}
#mdlSiteLoading {z-index: 9999;max-width: 500px;}
select.form-control:not([size]):not([multiple]) {height: calc(2.15625rem + 22px)!important;}
.cssDatosBasicosLogin,.cssDatosBasicosLogin select,.cssDatosBasicosLogin a,.cssDatosBasicosLogin .btn-link{font-size:14px;text-transform:uppercase;}
.formCssDatosConfronta input[type=text],.formCssDatosConfronta input[type=password] {
  height: 44px;
  font-size: 14px;
  width: 100%;
  margin-bottom: 10px;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid #d9d9d9;
  border-top: 1px solid #c0c0c0;
  padding: 0 8px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.formCssDatosConfronta input[type=text]:hover, .formCssDatosConfronta input[type=password]:hover{
  border: 1px solid #0f1f6770;
  border-top: 1px solid #0f1f6770;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}
.formCssDatosConfronta select,.divPrincipalDatosBasicosPreguntas select ,.cssformDropDownList select
{
    height: calc(2.15625rem + 22px)!important;
    font-size: 14px;
    padding: 0 8px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.formCssDatosConfronta select:hover,.divPrincipalDatosBasicosPreguntas select:hover,.cssformDropDownList select{
  border: 1px solid #0f1f6770;
  border-top: 1px solid #0f1f6770;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}
.cssDatosBasicosConfronta input[type=text], .cssDatosBasicosConfronta select{font-size: 14px;text-transform: uppercase;}
.cssDatosBasicosConfronta input[type=text]:hover, .cssDatosBasicosConfronta select:hover{
  border: 1px solid #0f1f6770;
  border-top: 1px solid #0f1f6770;
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
  box-shadow: 0px 2px 10px 5px rgba(0,0,0,.1);
}
.btn-submitForm {
  border: 0px;
  margin:0px!important;
  color: #fff!important;
  text-shadow: 0 1px rgba(0,0,0,0.1); 
  background-color: #0f1f67!important;
  font-size:14px!important;
}
.btn-submitForm:hover {border: 0px;text-shadow: 0 1px rgba(0,0,0,0.3)!important;background-color: #1f2021!important;}
select.form-control:not([size]):not([multiple]) {height: calc(2.15625rem + 22px)!important;}
.form-RadioButtonList>tbody>tr>td>input[type="radio"]{display: inline-block!important;}
.demo-header{display:none!important;}
.col-form-label {font-weight: bold;}
@media all\0 {
  #lbtSolicitarAcceso,#lbtnOlvidoClave { float:none!important; }
}
.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.cssDatosBasicosLogin>div.row>div .col-form-label,.formCssDatosConfronta>div .col-form-label{
    color: #000000!important;
}
span.form-control.infoFormControl.cssckboxAutorizacion{
    width: 10%;
    padding: 0px!important;
    color: #495057;
    background-color: transparent!important;
    border: 0px!important;
    -ms-transform: scale(1.6); /* IE */
    -moz-transform: scale(1.6); /* FF */
    -webkit-transform: scale(1.6); /* Safari y Chrome */
    -o-transform: scale(1.6); /* Opera */
    transform: scale(1.6);
    display: inline!important;
}
.csslblTerminoCondiccion {
   float: left;
   width: 90%;
   padding-top: calc(0rem);
   padding-bottom: calc(0.2rem);
}
#ckTerminoCondiccion,#ckAutorizarActivar,.cssckboxckPoliticasTerminos>#ckPoliticas {
    display:inline!important;
}

.cssMensajeTerminos {
    padding-top: 19px;
    overflow-y: scroll!important;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

@media (min-width: 800px) and (max-width: 7280px){
    .cssMensajeTerminos {
        height: 400px;        
    }
    h3, .h3 {
        font-size: 1.3rem;
    }
    h5, .h5 {
        font-size: 1.1rem;
    }
    .cssMensajeTerminosContenido {
        font-size: 13px;
    }
}

@media only screen and (min-width: 0px) and (max-width: 799px) {
    .cssMensajeTerminos {
        height: 180px;
    }
    h5, .h5 {
        font-size: 0.8rem;
    }
    .cssMensajeTerminosContenido,.cssControlAutorizar,#titleVentanaModalGenericoNuevaCuenta {
        font-size:12px;
    }
    h3, .h3{
        font-size: 1.2rem;
    }
    .modal-dialog.cssTerminosLogin{
        width: 70%!important;
    }
    #VentanaModalLogin {
        position:inherit;
    }
}

@media only screen and (min-width: 700px) {
    .modal.show .modal-dialog.cssTerminosLogin{
        width: 70%!important;
        margin-top: 0px;
    }
    #VentanaModalLogin {
        position:inherit;
    }
}

@media only screen and (min-width: 0px) and (max-width: 599px) {
    #divPrincipalAcceso {
        padding: 0px;
        margin: 0px;
    }
    .form-signinOTP {
        margin-top: 63px!important;
    }
    .form-signin-headingOTP {
        margin-top: 0px;
        padding-top: 19px;
        padding-bottom: 2px;
    }
    .csslblmensajeErrorOTP,.cssrqtxtClave {
        background-color: #00040869;
        padding: 4px;
        font-weight: 200;
    }
    .loginSiteOTP input[type=text] {
        margin-bottom: 7px
    }
    .cssErrorOTPCodigo {
       margin-bottom: 0.5rem;
       margin-top: -0.2rem;
    }
}

.csslblckAutorizar {
    padding-left: 12px!important;
    color: #1f2021!important;
    font-weight: bold;
    margin-top: 2px;
}

#txtCorreoInstitucionalConfronta,#txtCorreoPersonalConfronta {
    text-transform: lowercase;
}

.cssControlAutorizar {margin-left: 20px;}

.custom-control-label::after {border: 1px #ababab solid;}

.cssCheckAutorizar {margin-bottom: 0.3rem !important;}
.cssckboxckPoliticasTerminos {margin-left: -24px;z-index: 2;position: relative;}
.cssckboxckPoliticasTerminos > #ckPoliticas {
    background-color: #2780E3!important;
    outline: 0px auto -webkit-focus-ring-color!important;
    outline-offset: 0px;
    height: 22px!important;
    width: 15px!important;
}
.form-RadioButtonList>tbody>tr>td>label,.form-RadioButtonList label {color:#000000!important;}
.csslblDatosValidosUsuario,.cssValLogin {font-size:12px!important;}
.cssValLogin > ul {display: none !important;}

@supports (-ms-ime-align: auto) {
    /* Microsoft EdgeV13&14 CSS styles go here */
    .login-help {
        padding-left: 9%;
        padding-right: 9%;
        text-align: center;
        display: block;
        margin-bottom:13px;
    }

    a.cssSolicitarAcceso {
        float:right!important;
    }
    a.cssOlvidoClave {
        float:left!important;
    }
}

@supports (-ms-accelerator: true) {
    /* Microsoft EdgeV13 CSS styles go here */
    .login-help {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        display: block;
        margin-bottom:13px;
    }

    a.cssSolicitarAcceso {
        float: right !important;
    }

    a.cssOlvidoClave {
        float: left !important;
    }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    /* IE10 & IE11 CSS styles go here */
    .login-help {
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        display: block;
        margin-bottom:13px;
    }
    a.cssSolicitarAcceso {
        float: right !important;
    }

    a.cssOlvidoClave {
        float: left !important;
    }

    .cssckboxckPoliticasTerminos > #ckPoliticas {
        color:#f2f2f2;
    }
}

.csslblckAutorizar {color:#000000!important;}

.custom-control-label::before
{
    background-color: #ffffff;
    border: 1px solid #000;
}

.csstxtClave {color:#fff!important;}

@media only screen and (max-width: 1024px) {
  .csslblDatosValidosUsuario {
    font-size: 10px!important;
  }
  .imgicon {
    height: 41%!important;
    margin: 0px!important;
    margin-left: -5px!important;
  }
  .login-card input[type=text], .login-card input[type=password] {
      height: 35px!important;
  }
}
.cssDatosValidosUsuario {
    font-size: 9px;
    line-height: 13.5px;
}

.loginGroupControles {
    margin-bottom: 0.4rem;
}