@charset "utf-8";
/* HAVAS MEDIA 2015 - Estilos UI Markup */

/* FONTS ICON */
/*modificado apuntado iconos inlcuidos en el fuente no directo a la pagina*/
@import url('https://sucursalvirtual.clarochile.cl/PagoExpress/resources/fontsaww/font-awesome.min.css');


/* VIEWPORT */
/*@viewport{
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport{
width: extend-to-zoom;
zoom: 1.0;
}*/


/* RESET */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
/*vertical-align: baseline;*/
zoom: 1;
}
html {
line-height: 1;
}
body {
font-family: Arial, sans-serif;
font-weight: normal;
line-height: 1.4;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
outline: 0;
}
ol,
ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption,
th,
td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
a img {
border: none;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary {
display: block;
}
a:link,
a:visited,
a:hover,
a:active {
-webkit-text-decoration: none;
-moz-text-decoration: none;
-ms-text-decoration: none;
-o-text-decoration: none;
text-decoration: none;
outline: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
outline: 0;
}
p {
color: #333;
padding: 4px 0;
}
::-moz-selection {
background: rgba(208,46,16,0.9);
color: #fff;
text-shadow: 0 1px #000;
}
::selection {
background: rgba(208,46,16,0.9);
color: #fff;
text-shadow: 0 1px #000;
}
:before,
:after {
font-family: FontAwesome;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}



/* FORM */
::-webkit-input-placeholder {
color: #C4C4C4;
}
:-moz-placeholder {
color: #C4C4C4;
}
::-moz-placeholder {
color: #C4C4C4;
}
:-ms-input-placeholder {
color: #C4C4C4 !important;
}
input:focus,
textarea:focus {
outline: none;
}
input[type="text"],
input[type="password"] {
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
outline: none;
display: block;
color: #666666;
font-size: .9em;
background-color: #FDFDFD;
border-radius: 2px;
border: 1px solid #ddd;
padding: .5em;
height: 35px;
width: 100%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
select {
font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
outline: none;
display: block;
color: #666666;
font-size: .9em;
background-color: #FDFDFD;
background-image: -webkit-linear-gradient(top, #FDFDFD, #FDFDFD);
background-image: -webkit-gradient(linear, left top, left bottom, from(#FDFDFD), to(#FDFDFD));
background-image: linear-gradient(top, #FDFDFD, #FDFDFD);
border-radius: 2px;
border: 1px solid #ddd;
width: 100%;
}



/* SCREEN */

/*.container {

/*position: absolute;*/
/*width: 100%;*/
/*max-width: 845px;
max-height: 600px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;*/

/*}*/
.head-one h1,
.head-two h1,
.head-three h1 {
color: #fff;
text-transform: uppercase;
letter-spacing: -1px;
line-height: 0.8;
}
.head-one h2,
.head-two h2,
.head-three h2 {
color: #fff;
text-transform: uppercase;
font-weight: normal;
}
.head-one .box,
.head-two .box,
.head-three .box {
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FiMjUwYyIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iMSUiIHN0b3AtY29sb3I9IiNhYjI1MGMiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYjI1MGMiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(171,37,12,0.8)), color-stop(1%,rgba(171,37,12,0.8)), color-stop(100%,rgba(171,37,12,0.8)));
background: -webkit-linear-gradient(top,  rgba(171,37,12,0.8) 0%,rgba(171,37,12,0.8) 1%,rgba(171,37,12,0.8) 100%);
background: -webkit-gradient(linear, left top, left bottom, from(rgba(171,37,12,0.8)), color-stop(1%, rgba(171,37,12,0.8)), to(rgba(171,37,12,0.8)));
background: -webkit-linear-gradient(top, rgba(171,37,12,0.8) 0%, rgba(171,37,12,0.8) 1%, rgba(171,37,12,0.8) 100%);
background: linear-gradient(to bottom,  rgba(171,37,12,0.8) 0%,rgba(171,37,12,0.8) 1%,rgba(171,37,12,0.8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccab250c', endColorstr='#ccab250c',GradientType=0 );
position: absolute;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 15px 25px;
}
.head-one img,
.head-two img,
.head-three img {
width: 100%;
}
.head-one {
width: 100%;
max-height: 480px;
overflow: hidden;
}
.head-one h1 {
font-size: 2em;
}
.head-one h2 {
font-size: 1.3em;
}
.head-one .box {
top: 18px;
}
.head-two {
width: 100%;
max-height: 180px;
overflow: hidden;
}
.head-two .box {
top: 114px;
padding: 15px 15px 8px 15px;
}
.head-two h1 {
font-size: 1.4em;
}
.head-two h2 {
font-size: 1.2em;
}
.head-three {
width: 100%;
max-height: 265px;
overflow: hidden;
}
.head-three .box {
top: 120px;
}
.head-three h1 {
font-size: 1.4em;
}
.head-three h2 {
font-size: 1.2em;
}
.cliente {
background: #efefef;
border: 1px solid #ddd;
width: 100%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 15px;
}
.cliente p {
font-weight: bold;
font-size: .8em;
display: inline-block;
}
.cliente span.nombre {
display: inline-block;
text-transform: uppercase;
font-size: .8em;
color: #666;
}
.cliente span.ayuda {
float: right;
display: inline-block;
width: 18px;
height: 24px;
line-height: 1.5;
overflow: hidden;
text-align: center;
cursor: pointer;
}
.cliente span.ayuda::before {
content: "\f059";
display: inline-block;
font-size: 1.2em;
color: #919191;
}
.cliente span.ayuda div {
position: absolute;
width: 180px;
height: 45px;
background: #FBFBFB;
border: 1px solid #ddd;
visibility: hidden;
border-radius: 3px;
border-radius: 3px;

outline: 0;
padding: 6px 10px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
-webkit-box-shadow: 5px 0px 8px 0px rgba(100, 100, 100, 0.2);
box-shadow: 5px 0px 8px 0px rgba(100, 100, 100, 0.2);
left: 0;
}
.cliente span.ayuda div:before {
content: '';
position: absolute;
top: 100%;
right: 8px;
width: 0;
height: 0;
border-top: 9px solid #DDDDDD;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
}
.cliente span.ayuda div:after {
content: '';
position: absolute;
top: 100%;
right: 9px;
width: 0;
height: 0;
border-top: 8px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.cliente span.ayuda div>i {
width: 21px;
height: 23px;
display: inline-block;
position: relative;
bottom: 0;
}
.cliente span.ayuda div>i:before {
content: "\f059";
display: inline-block;
font-size: 1.5em;
color: #d02e10;
font-style: normal;
line-height: 1;
margin-left: 2px;
}
.cliente span.ayuda div>p {
color: #666;
font-weight: normal;
font-size: .7em;
line-height: 1.3;
width: 124px;
padding: 0;
position: relative;
top: 2px;
margin-left: 4px;
}
.cliente span.ayuda div>p>i {
width: 6px;
height: 10px;
overflow: hidden;
display: inline-block;
line-height: 1;
}
.cliente span.ayuda div>p>i:before {
content: "\f054";
display: inline-block;
font-size: 1em;
font-style: normal;
}
.cliente span.ayuda:hover div {
visibility: visible;
opacity: 1;
top: 133px;
right: 5px;
z-index: 999;
line-height: 1.5;
left: auto;
}
.servicios {
width: 100%!important;
max-width: 845px;
height: 270px;
overflow: auto;
margin: 10px 0;
outline: 0;
}
.servicios .titulos {
overflow: hidden;
margin-bottom: 5px;
}
.servicios .titulos p {
display: inline-block;
font-weight: bold;
font-size: .75em;
}
.servicios .titulos p.blank {
width: 57%;
}
.servicios .titulos p.monto {
width: 24%;
}
/*.jspContainer {
overflow: hidden;
position: relative;
width: 100%!important;
max-width: 845px;
}*/
.jspPane {
position: absolute;
max-width: 830px;
width: 97%!important;
}
.jspTrack {
background: #ececec;
border: 1px solid #F0F0F0;
position: relative;
border-radius: 5px;
}
.jspDrag {
background: #919191;
border-radius: 5px;

position: relative;
top: 0;
left: 0;
cursor: pointer;
}
.jspVerticalBar {
position: absolute;
top: 0;
right: 0;
width: 11px;
height: 100%;
}
.jspArrow.jspDisabled {
cursor: default;
opacity: 0.3;
}
.jspArrow {
display: block;
cursor: pointer;
padding: 0;
margin: 0;
}
.jspArrowUp:before {
content: "\f077";
display: inline-block;
font-size: .75em;
color: #919191;
}
.jspArrowDown:before {
content: "\f078";
display: inline-block;
font-family: FontAwesome;
font-size: .75em;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
color: #919191;
}
.accordion-toggle {
cursor: pointer;
display: block;
border: 1px solid #ddd;
padding: 10px 20px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
margin-bottom: 2px;
}
.accordion-toggle li {
display: inline-block;
overflow: hidden;
}
.accordion-toggle li.open {
float: right;
position: relative;
top: 12px;
}
.accordion-toggle li.open a {
width: 13px;
height: 13px;
overflow: hidden;
display: inline-block;
line-height: 1;
}
.accordion-toggle li.open a:before {
content: "\f054";
display: inline-block;
font-size: .8em;
color: #666;
}
.accordion-toggle li.down a:before {
content: "\f078";
display: inline-block;
font-size: .8em;
color: #666;
}
.accordion-toggle input {
display: inline-block;
margin: 0;
z-index: 10;
position: relative;
bottom: 3px;
width: 15px;
height: 15px;
}
.accordion-toggle .producto {
font-weight: bold;
font-size: .75em;
width: 42%;
position: relative;
bottom: 2px;
}
.accordion-toggle .producto:before {
content: "";
background: url(/PagoExpress/resources/img/sprite-productos.png) no-repeat top left;
display: inline-block;
width: 25px;
height: 25px;
margin-right: 15px;
position: relative;
top: 5px;
}
.accordion-toggle .producto.telefonia-movil:before {
background-position: -45px 2px;
}
.accordion-toggle .producto.internet:before {
background-position: -175px 2px;
}
.accordion-toggle .producto.telefonia-fija:before {
background-position: -137px 2px;
}
.accordion-toggle .producto.television:before {
background-position: -89px 6px;
}
.accordion-toggle .producto.todo-claro:before {
background-position: 0 2px;
}
.accordion-toggle .alerta {
font-size: 0;
padding: 2px 7px;
text-align: center;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
width: 11%;
margin-right: 4%;
position: relative;
bottom: 1px;
}
.accordion-toggle .alerta.vencido {
font-size: .7em;
background: #d02e10;
color: #fff;;
}
.accordion-toggle .alerta.vencido:before {
content: "Vencida";
font-family: Arial,sans-serif;
text-align: center;
}
.accordion-toggle .alerta.por-vencer {
font-size: .7em;
background: #FFCE00;  
color: #333;
}
.accordion-toggle .alerta.por-vencer:before {
content: "Por vencer";
font-family: Arial,sans-serif;
text-align: center;
}
.accordion-toggle .monto {
color: #d02e10;
font-weight: bold;
font-size: .8em;
width: 25%;
position: relative;
bottom: 1px;
}
.accordion-content {
background: #f9f9f9;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
display: none;
margin: -2px 0 2px 0;
}
.accordion-content ul {
line-height: 1;
}
.accordion-content ul li {
display: inline-block;
width: 48%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.accordion-content li p {
font-size: .7em;
font-weight: bold;
display: inline-block;
width: 125px;
}
.accordion-content li span {
font-size: .7em;
display: inline-block;
}
.accordion-content.default {
display: block;
}
.total-servicios {
background: #efefef;
border: 1px solid #ddd;
width: 100%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 15px;
}
.total-servicios p {
font-weight: bold;
font-size: .8em;
display: inline-block;
padding-top: 8px;
}
.total-servicios span {
color: #d02e10;
font-weight: bold;
font-size: 1em;
display: inline-block;
padding-top: 8px;
}
.total-servicios a {
float: right;
}
.go-sv {
text-align: center;
font-size: .75em;
margin-top: 5px;
}
.go-sv a {
font-size: 100%;
}
.total-cancelar {
background: #efefef;
border: 1px solid #ddd;
width: 350px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 214px;
position: absolute;
border-radius: 2px;
}
.total-cancelar p {
font-weight: bold;
font-size: .85em;
}
.total-cancelar span {
color: #d02e10;
font-weight: bold;
font-size: 1.2em;
}
.medio-pago {
  text-align: center;
  max-width: 800px;
  margin: 145px auto 0 auto;
}
.medio-pago p {
font-weight: bold;
font-size: 1em;
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.medio-pago a {
display: inline-block;
  width: 200px;
  height: 83px;
  box-shadow: 0 0px 1px rgba(0, 0, 0, 0.41);
  font-size: 0em;
  margin: 0 6px;
}
.medio-pago a.webpay {
background: #F4F4F4 url(/PagoExpress/resources/img/webpay-bg.png) no-repeat top center;
}
.medio-pago a.lider {
background: #F4F4F4 url(/PagoExpress/resources/img/lider-bg.png) no-repeat top center;
}
.medio-pago a.servipag {
background: #F4F4F4 url(/PagoExpress/resources/img/servipag-bg.png) no-repeat top center;
}
.medio-pago a:hover {
opacity: 0.8;
}
.volver-resumen {
width: 150px;
display: block;
margin: 80px auto 0;
text-align: center;
}
.volver-resumen:before {
content: "\f053";
display: inline-block;
font-size: 1em;
padding-right: 10px;
}
.error-one {
margin-top: 20px;
}
.error-one span {
text-align: center;
font-weight: bold;
color: #d02e10;
margin: 0 auto 30px auto;
max-width: 200px;
display: block;
}
.error-one p {
font-weight: bold;
font-size: .8em;
text-transform: uppercase;
text-align: center;
margin-bottom: 30px;
}
.error-one ul {
max-width: 600px;
margin: 0 auto 55px auto;
}
.error-one ul li {
font-size: .8em;
color: #666;
line-height: 1.8;
}
.error-one ul li:before{
content: "\f105";
display: inline-block;
font-size: 1em;
color: #d02e10;
font-weight: bold;
line-height: 0;
padding-right: 10px;
}
.cliente .error {
text-align: center;
display: block;
}
.cliente .error:before {
content: "\f071";
display: inline-block;
font-size: 1.3em;
color: #d02e10;
line-height: 0;
padding-right: 12px;
}
.error-two {
text-align: center;
margin: 25px 0 130px 0;
}
.error-two span {
font-weight: bold;
font-size: .95em;
border-bottom: 1px solid #ddd;
display: block;
max-width: 400px;
margin: 0 auto 30px auto;
padding: 30px 0;
}
.error-two span:before {
content: "\f071";
display: inline-block;
font-size: 1.5em;
color: #d02e10;
line-height: 0;
padding-right: 10px;
}
.error-two p {
font-size: .9em;
padding: 0;
}
.cliente .center {
text-align: center;
display: block;
}
.comprobante {
width: 90%;
margin: 0 auto;
}
.comprobante .datos {
margin: 15px 0;
background: url(/PagoExpress/resources/img/marca-agua.jpg) no-repeat right top;
}
.comprobante .datos li {
width: 49%;
display: inline-block;
line-height: 1;
}
.comprobante .datos li p {
display: inline-block;
font-size: .75em;
font-weight: bold;
width: 45%;
padding: 0;
}
.comprobante .datos li span {
display: inline-block;
font-size: .75em;
}
.comprobante .monto {
background: #efefef;
border: 1px solid #ddd;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 24px;
width: 245px;
margin: 0 auto;
text-align: center;
border-radius: 2px;
}
.comprobante .monto p {
font-size: .8em;
font-weight: bold;
display: inline-block;
}
.comprobante .monto span {
font-size: .9em;
font-weight: bold;
color: #d02e10;
padding-left: 10px;
}
.comprobante .send {
border-top: 1px solid #ddd;
padding-top: 20px;
margin: 20px auto 0;
width: 100%;
text-align: center;
height: 86px;
}
.comprobante .send label {
font-weight: bold;
display: block;
font-size: .75em;
padding-bottom: 5px;
}
.comprobante .send input {
border: 1px solid #ddd;
color: #333;
margin-bottom: 12px;
border-radius: 2px;
font-size: .8em;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
width: 295px;
margin: 0 4px 0 0;
display: inline-block;
}
.comprobante .send .error {
display: block;
font-size: .7em;
color: #d02e10;
padding-top: 6px;
}
.comprobante .send .bt-r {
padding: 11px;
width: 90px;
}
.comprobante .send .exito {
background: #efefef;
border: 1px solid #ddd;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 15px;
width: 80%;
margin: 0 auto;
text-align: center;
border-radius: 2px;
}
.comprobante .send .exito p {
color: #d02e10;
font-weight: bold;
font-size: .8em;
padding: 0 0 5px 0;
}
.comprobante .send .exito span {
font-size: .8em;
color: #4B4B4B;
}
.comprobante .links {
text-align: center;
margin-top: 20px;
}
.comprobante .links .bt-link.print:before {
content: "\f02f";
display: inline-block;
font-size: 1em;
padding-right: 6px;
}
.comprobante .links .bt-link.print {
margin-right: 30px;
}
.comprobante .links .bt-link.pdf:before {
content: "\f1c1";
display: inline-block;
font-size: 1em;
padding-right: 6px;
}
.login-sv {
width: 450px;
margin: 13px auto 0;
}
.login-sv h3 {
font-size: .8em;
margin: 0 auto;
border-bottom: 1px solid #ddd;
padding-bottom: 15px;
margin-bottom: 20px;
}
.login-sv form fieldset {
height: 65px;
margin-bottom: 10px;
}
.login-sv form label {
font-weight: bold;
font-size: .7em;
padding-bottom: 2px;
display: block;
}
.login-sv form span.error {
color: #d02e10;
font-size: .7em;
}
.login-sv ul.tut {
text-align: center;
margin-top: 25px;
border-top: 1px solid #ddd;
padding-top: 15px;
}
.login-sv ul.tut span {
display: block;
font-size: .7em;
font-weight: bold;
color: #666;
margin-bottom: 10px;
}
.login-sv ul.tut li {
display: inline-block;
width: 20%;
font-size: .7em;
text-align: center;
margin: 10px 15px;
color: #666;
cursor: pointer;
}
.login-sv ul.tut li.one:before {
content: "\f007";
display: block;
color: #d02e10;
font-size: 1.3em;
border: 2px solid #d02e10;
border-radius: 100%;
width: 23px;
height: 23px;
line-height: 1.5;
margin: 0 auto 5px auto;
}
.login-sv ul.tut li.two:before {
content: "\f0c5";
display: block;
color: #d02e10;
font-size: 2em;
line-height: 1;
margin: 0 auto 5px auto;
font-weight: bold;
text-align: center;
}
.login-sv ul.tut li.three:before {
content: "\f1c1";
display: block;
color: #d02e10;
font-size: 2em;
line-height: 1;
margin: 0 auto 5px auto;
font-weight: bold;
text-align: center;
}
.login-sv .tut li div {
position: absolute;
visibility: hidden;
outline: 0;
left: 0;
bottom: 0;
}
.login-sv .tut li div:before {
content: '';
position: absolute;
top: 100%;
width: 0;
height: 0;
border-top: 9px solid #DDDDDD;
border-right: 11px solid transparent;
border-left: 11px solid transparent;
}
.login-sv .tut li div:after {
content: '';
position: absolute;
top: 100%;
width: 0;
height: 0;
border-top: 8px solid #FFFFFF;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.login-sv .tut li:hover div {
visibility: visible;
opacity: 1;
z-index: 999;
line-height: 1.4;
bottom: 115px;
width: 320px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
padding: 15px;
background: #FBFBFB;
border: 1px solid #ddd;
border-radius: 2px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
}
.login-sv .tut li div p {
font-size: 1em;
padding: 0 3px 10px 3px;
}
.login-sv .tut li div p:before {
background: #d02e10;
color: #fff;
border-radius: 100%;
font-style: normal;
width: 16px;
height: 16px;
line-height: 1.5;
display: inline-block;
text-align: center;
font-size: .85em;
padding-left: 1px;
margin-right: 5px;
}
.login-sv .tut li div img {
width: 100%;
height: auto;
border: 1px dotted #ddd;
}
.login-sv .tut li.one div p:before {
content: "1";
}
.login-sv .tut li.one div:before {
left: 24px;
}
.login-sv .tut li.one div:after {
left: 25px;
}
.login-sv .tut li.two div p:before {
content: "2";
}
.login-sv .tut li.two div:before {
left: 147px;
}
.login-sv .tut li.two div:after {
left: 148px;
}
.login-sv .tut li.three div p:before {
content: "3";
}
.login-sv .tut li.three div:before {
left: 271px;
}
.login-sv .tut li.three div:after {
left: 272px;
}
.no-deuda {
background: #efefef;
border: 1px solid #ddd;
width: 350px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 120px;
position: absolute;
border-radius: 2px;
}
.no-deuda p {
font-weight: bold;
font-size: .8em;
padding: 0;
}
.no-deuda span {
color: #d02e10;
font-weight: bold;
font-size: .8em;
}

.no-deuda2 {
background: #efefef;
border: 1px solid #ddd;
/*width: 350px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 8px 10px;
text-align: center;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
top: 190px;
position: absolute;*/
border-radius: 2px;
}

.no-deu {
font-weight: bold;
font-size: .8em;
padding: 0;
}

.no-deu2  {
color: #d02e10;
font-weight: bold;
font-size: .8em;
}

/* CAJETIN */
/*.cajetin {
position: relative;
top: 105px;
right: 35px;
width: 255px;
}*/
.cajetin form {
width: 100%;

background-color: #f9f9f9;
border: 1px solid #ddd;
padding: 15px 20px;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
}
.cajetin form fieldset {
display: block;
margin-bottom: 10px;
height: 68px;

}
.cajetin form fieldset input#rut {
height: 37px;

}
.cajetin form fieldset.captcha {
margin-bottom: 15px;

}
.cajetin form fieldset.captcha label span {
font-style: italic;
color: #666;

}
.cajetin form fieldset.captcha div  {
outline: none;
display: block;
color: #666666;
font-size: .9em;
background-color: #FDFDFD;
border-radius: 2px;
border: 1px solid #ddd;
padding: 2px;
height: 37px;
width: 100%;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;

}
.cajetin form fieldset.captcha div ul {
width: 200px;
overflow: hidden;
margin: 0 auto;
padding-top: 3px;


}
.cajetin form fieldset.captcha ul li {
background-image: url(https://sucursalvirtual.clarochile.cl/PagoExpress/resources/img/sprite-captcha.png);
background-repeat: no-repeat;
display: inline-block;
width: 26px;
height: 27px;
text-indent: 81px;
overflow: hidden;
margin: 0 7px;

}
.cajetin form fieldset.captcha ul li.candado {
background-position: -5px -5px;

}
.cajetin form fieldset.captcha ul li.reloj {
background-position: -5px -39px;
}
.cajetin form fieldset.captcha ul li.campana {
background-position: -5px -75px;
}
.cajetin form fieldset.captcha ul li.corazon {
background-position: -5px -110px;
}
.cajetin form fieldset.captcha ul li.auto {
background-position: -5px -144px;
}
.cajetin form fieldset.captcha ul li.ancla {
background-position: -5px -180px;
}
.cajetin form fieldset.captcha ul li.tijeras {
background-position: -5px -213px;
}
.cajetin form fieldset.captcha ul li.trebol {
background-position: -5px -249px;
}
.cajetin form fieldset.captcha ul li.bote {
background-position: -5px -283px;
}
.cajetin form fieldset.captcha ul li.pelota {
background-position: -5px -320px;
}
.cajetin form fieldset.captcha ul li.perro {
background-position: -5px -353px;
}
.cajetin form fieldset.captcha ul li.luna {
background-position: -5px -389px;
}
.cajetin form fieldset.captcha ul li.ampolleta {
background-position: -5px -424px;
}
.cajetin form fieldset.captcha ul li.avion {
background-position: -5px -458px;
}
.cajetin form fieldset.captcha ul li.dados {
background-position: -5px -493px;
}
.cajetin form fieldset.captcha ul li.taza {
background-position: -5px -529px;
}
.cajetin form fieldset.captcha ul li.maletin {
background-position: -4px -564px;
}
.cajetin form fieldset.captcha ul li.paraguas {
background-position: -5px -599px;
}
.cajetin form fieldset.captcha ul li.helado {
background-position: -5px -634px;
}
.cajetin form fieldset.captcha ul li.cartas {
background-position: -5px -669px;
}
.cajetin form fieldset.captcha ul li.candado#active {
background-position: -40px -5px;
}
.cajetin form fieldset.captcha ul li.reloj#active {
background-position: -40px -39px;
}
.cajetin form fieldset.captcha ul li.campana#active {
background-position: -40px -75px;
}
.cajetin form fieldset.captcha ul li.corazon#active {
background-position: -40px -110px;
}
.cajetin form fieldset.captcha ul li.auto#active {
background-position: -40px -144px;
}
.cajetin form fieldset.captcha ul li.ancla#active {
background-position: -40px -180px;
}
.cajetin form fieldset.captcha ul li.tijeras#active {
background-position: -40px -213px;
}
.cajetin form fieldset.captcha ul li.trebol#active {
background-position: -40px -249px;
}
.cajetin form fieldset.captcha ul li.bote#active {
background-position: -40px -283px;
}
.cajetin form fieldset.captcha ul li.pelota#active {
background-position: -40px -320px;
}
.cajetin form fieldset.captcha ul li.perro#active {
background-position: -40px -353px;
}
.cajetin form fieldset.captcha ul li.luna#active {
background-position: -40px -389px;
}
.cajetin form fieldset.captcha ul li.ampolleta#active {
background-position: -40px -424px;
}
.cajetin form fieldset.captcha ul li.avion#active {
background-position: -40px -458px;
}
.cajetin form fieldset.captcha ul li.dados#active {
background-position: -40px -493px;
}
.cajetin form fieldset.captcha ul li.taza#active {
background-position: -40px -529px;
}
.cajetin form fieldset.captcha ul li.maletin#active {
background-position: -39px -564px;
}
.cajetin form fieldset.captcha ul li.paraguas#active {
background-position: -40px -599px;
}
.cajetin form fieldset.captcha ul li.helado#active {
background-position: -40px -634px;
}
.cajetin form fieldset.captcha ul li.cartas#active {
background-position: -40px -669px;

}

.cajetin form fieldset.captcha ul li a {/*-----puse width auto y se----*/
display: block;
height: 25px;
width: auto;

}
.cajetin form h3 {
font-size: 1em;
margin-bottom: 15px;
color: #666;
}
.cajetin form label {
font-weight: bold;
font-size: .7em;
display: block;
padding: 0 0 2px 3px;
}
.cajetin form fieldset span.error {
font-size: .6em;
color: #d02e10;
display: block;
padding: 2px 0 0 4px;
}
.cajetin p {
width: 100%;
font-size: .65em;
color: #666666;
text-align: center;
background-color: #e7e7e7;
padding: 7px 0;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-right: 1px solid #ddd;
text-shadow: 1px 1px 1px #fff;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
display: block;
}
.cajetin p::before {
content: "\f023";
display: inline-block;
font-size: 1.2em;
color: #7F7F7F;
padding-right: 4px;
}



/* CARACTERISTICAS */
.caracteristicas {
margin-top: 20px;
}
.caracteristicas ul li {
display: inline-block;
width: 24%;
text-align: center;
padding: 0;
}
.caracteristicas ul li h4 {
font-size: .85em;
margin-top: 10px;
}
.caracteristicas ul li.seguro,
.caracteristicas ul li.facil,
.caracteristicas ul li.tiempo {
border-right: 1px solid #ddd;
}
.caracteristicas ul li.seguro span {
background-position: -237px 0;
}
.caracteristicas ul li.facil span {
background-position: -160px 0;
}
.caracteristicas ul li.tiempo span {
background-position: -81px 0;
}
.caracteristicas ul li.plataforma span {
background-position: 0 0;
}
.caracteristicas ul li span {
background: url(/PagoExpress/resources/img/sprite-caracteristicas.png) no-repeat center;
overflow: hidden;
text-indent: 99999px;
display: block;
width: 84px;
height: 58px;
padding: 0;
margin: 0 auto;
}




/* BOTONES */
.bt-r {
background-color: #d02e10;
border-radius: 2px;
background-clip: padding-box;
-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.2);
background-image: -webkit-linear-gradient(90deg, #941b12 0%, #d52b1e 100%);
background-image: linear-gradient(0deg, #941b12 0%, #d52b1e 100%);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: .85em;
font-weight: normal;
padding: .5em 1em;
text-align: center;
border: 0;
outline: 0;
}
.bt-link {
color: #3481b7;
font-size: .8em;
}



/* RESPONSIVE 745px */
@media screen and (max-width: 745px) {
/*.container {
height: auto;
}*/
.head-one .box h1 {
font-size: 1.3em;
letter-spacing: 0;
}
.head-one .box h2 {
font-size: 1em;
}
.head-two {
height: 160px;
}
.head-two .box {
top: 109px;
width: 100%;
padding: 10px 10px 5px 10px;
}
.head-two .box h1 {
font-size: 1.1em;
letter-spacing: 0;
}
.head-two .box h2 {
font-size: 1em;
}
.cajetin {
width: 540px;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
bottom: 33%;
top: 45%;
}
.cajetin form {
padding: 15px 20px 10px 20px;
}
.cajetin h3 {
display: none;
}
.cajetin form fieldset {
display: inline-block;
margin: 0;
width: 190px;
overflow: hidden;
}
.cajetin form fieldset.captcha {
margin: 0;
width: 207px;
}
.cajetin form button.bt-r {
position: absolute;
top: 33px;
padding: 9px 10px;
right: 21px;
}
.accordion-toggle .producto {
width: 29%;
top: 2px;
}
.accordion-toggle .producto:before {
display: none;
}
.accordion-toggle .alerta {
width: 15%;
margin-right: 5%;
top: 4px;
}
.accordion-toggle .monto {
top: 5px;
}
.accordion-toggle input {
top: 2px;
}
.accordion-toggle li.open {
top: 6px;
}
.servicios .titulos p.blank {
width: 50%;
}
.head-three {
max-height: 200px;
}
.head-three .box {
top: 127px;
}
.total-cancelar {
top: 190px;
}
.medio-pago {
margin-top: 138px;
width: 100%;
box-sizing: border-box;
padding: 0 10px;
}
.medio-pago a {
width: 150px;
height: 63px;
}
.medio-pago a.servipag,
.medio-pago a.lider,
.medio-pago a.webpay {
background-size: 150px;
}

.volver-resumen {
margin: 75px auto 0;
}

.error-one ul {
max-width: 90%;
margin: 0 auto 30px auto;
}
.comprobante .datos li {
display: block;
width: 100%;
}
.cliente span.ayuda:hover div {
top: 112px;
}
.no-deuda {
top: 83px;
}
}



/* RESPONSIVE 555px */
@media screen and (max-width: 555px) {
.head-one {
height: 200px;
}
.head-one .box {
bottom: 0;
top: inherit;
width: 100%;
padding: 10px;
}
.head-one .box h1 {
font-size: .95em;
}
.head-one .box h2 {
font-size: .8em;
}
.head-two {
height: 150px;
}
.head-two .box {
top: 105px;
width: 100%;
padding: 10px 10px 5px 10px;
}
.head-two .box h1 {
font-size: 1em;
}
.head-two .box h2 {
font-size: .8em;
}
.cajetin {/*---------------cajetin-------------------*/
margin: 0 auto;
top: 100%;
width: 100%;
/*border:solid 1px #DDDDDD;*/
}
.cajetin form {
background: #fff;
border: 0;
padding: 10px;
margin-top: 20px;
}
.cajetin form fieldset {
display: block;
margin-bottom: 15px;
height: auto;
width: 100%;
}
.cajetin form fieldset.captcha {
margin-bottom: 15px;
width: 100%;
}
.cajetin form fieldset input,
.cajetin form fieldset div {
height: 40px!important;
}
.cajetin form fieldset div ul {
margin-top: 3px!important;
}
.cajetin form button.bt-r {
top: inherit;
position: relative;
margin: 0;
right: 0;
}
.cajetin p {
width: 95%;
margin: 0 auto;
padding: 10px;
border: 1px solid #E7E7E7;
margin-top: 10px;
background: #efefef;
}
.caracteristicas {
display: none;
}
.bt-r {
background: #d52b1e;
color: #fff!important;
padding: 13px;
width: 100%;
border: 0;
display: block;
margin: 2% 0;
text-align: center;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-shadow: none;
box-shadow: none;
}
.cliente {
background: none;
border: none;
border-bottom: 1px solid #ddd;
margin: 10px 0;
padding: 0 10px 12px 10px;
}
.cliente p {
display: block;
}
.cliente span.nombre {
display: block;
}
.cliente span.ayuda {
display: none;
}
.total-servicios {
background: none;
border: none;
overflow: hidden;
padding: 0 15px;
text-align: center;
}
.total-servicios p {
font-size: .75em;
}
.total-servicios span {
padding: 0;
font-size: .95em;
margin-bottom: 20px;
}
.go-sv {
padding: 0 15px;
}
.servicios {
height: auto;
}
.servicios .titulos p.blank {
width: 51%;
}
.accordion-toggle .producto {
top: 3px;
width: 37%;
}
.accordion-toggle .alerta {
font-size: 0em!important;
width: 10px;
height: 14px;
top: 2px;
margin-right: 10%
}
.accordion-toggle .monto {
width: 28%;
}
.accordion-toggle li.open {
top: 8px;
}
.accordion-toggle li.open a:before {
font-size: .7em;
padding-top: 2px;
}
.accordion-content ul li {
width: 100%;
}
.head-three .box {
width: 100%;
padding: 15px 15px 9px 15px;
top: 143px;
}
.total-cancelar {
width: 90%;
top: 185px;
}
.head-three h1 {
font-size: 1em;
}
.head-three h2 {
font-size: .95em;
}
.volver-resumen {
margin: 50px auto 0;
}
#accordion {
width: 95%;
margin: 0 auto;
}
.comprobante .send {
height: auto;
}
.comprobante .send label {
font-size: .7em;
}
.comprobante .send input {
width: 100%;
}
.comprobante .send .bt-r {
width: 100%;
padding: 12px;
}
.comprobante .send .error {
background: #efefef;
border: 1px solid #ddd;
color: #666;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
padding: 5px 24px;
width: 100%;
margin: 0 auto;
text-align: center;
border-radius: 2px;
}
.comprobante .send .exito {
width: 100%;
padding: 10px;
}
.comprobante .monto {
width: 100%;
}
.login-sv {
max-width: 450px;
width: 100%;
}
.go-sv a {
display: block;
}
.medio-pago {
padding: 0 30px;
}
.medio-pago a {
display: block;
margin: 10px auto;
}

}



/* RESPONSIVE 440px */
@media screen and (max-width: 440px) {
.head-one {
height: 150px;
}
.head-two {
height: 145px;
}
.head-two .box {
top: 107px;
}
.head-two .box h1 {
font-size: .7em;
}
.head-two .box h2 {
font-size: .7em;
}
.servicios .titulos p.blank {
width: 42%;
}
.servicios .titulos p.monto {
width: 32%;
}
.accordion-toggle .alerta {
display: none;
}
.accordion-toggle .monto {
width: 35%;
}
.head-three {
max-height: 150px;
}
.head-three .box {
top: 97px;
}
.head-three h1 {
font-size: .8em;
}
.head-three h2 {
font-size: .85em;
}
.total-cancelar {
top: 175px;
}
.total-servicios p {
display: block;
}
.medio-pago {
margin-top: 130px;
max-width: 300px;
}
.error-one {
margin-top: 20px;
}
.error-one span {
margin: 0 auto 20px auto;
}
.error-one p {
font-size: .7em;
width: 90%;
margin: 0 auto 15px;
}
.error-one ul {
font-size: .9em;
}
#accordion {
width: 90%;
}
.login-sv ul.tut {
display: none;
}
.login-sv h3, 
.login-sv form, 
.login-sv .links {
width: 90%;
margin: 0 auto;
}
.login-sv h3 {
font-size: .75em;
padding-bottom: 10px;
margin-bottom: 20px;
}
.login-sv ul.links li {
display: block;
width: 100%;
margin: 20px 0;
}
.login-sv ul.links {
margin: 30px auto 0;
}
.login-sv ul.links li a {
font-size: .75em;
}
.login-sv ul.links li a:before {
display: none;
}
.login-sv ul.links li a:after {
content: "\f054";
position: relative;
font-weight: bold;
float: right;
color: #d52b1e;
font-size: 11px;
margin-right: 8px;
}
.total-cancelar p {
font-size: .8em;
}
.total-cancelar span {
font-size: 1em;
}
.medio-pago p {
font-size: .9em;
}
.no-deuda {
width: 90%;
}
.accordion-toggle {
padding: 10px;
}
.accordion-toggle .producto {
width: 39%;
}
.servicios .titulos p.monto {
width: 26%;
}
}
.mess {
	   background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(171, 37, 12, 0.8) 0%, rgba(171, 37, 12, 0.8) 1%, rgba(171, 37, 12, 0.8) 100%) repeat scroll 0 0;
}



/* INTERNET EXPLORER 10 HACK */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.login-sv ul.tut li.one:before {
border: none;
font-size: 2em;
}
.login-sv .tut li div p:before {
background: none;
color: #d02e10;
font-weight: bold;
font-size: 1em;
font-family: Arial, sans-serif;
}
.login-sv ul.tut li.one:before {
margin-bottom: 20px;
}
.head-two .box {
top: 112px;
}
}

/* INTERNET EXPLORER 09 HACK */
@media screen and (min-width:0\0) {
.head-two .box {
top: 111px;
}	
}

/* INTERNET EXPLORER 08 HACK */
@media \0screen {
.head-two .box {
top: 112px;
}	
}

/* FIREFOX HACK */
@-moz-document url-prefix() {
body {
line-height: 1.4
}
.head-two .box {
top: 112px;
}
@media screen and (max-width: 745px) {
.head-two .box {
  top: 109px;
}
@media screen and (max-width: 555px) {
.head-two .box {
  top: 104px;
}
@media screen and (max-width: 440px) {
.head-two .box {
  top: 105px;
}
}