﻿body {
    background: url('../images/fondoPagos.jpg');
    background-size: cover;
    padding-bottom: 50px;
}

.no-pad {
    padding: 0;
}

.upper {
    text-transform: uppercase !important;
}

.bold {
    font-weight: bold;
}

.margin-ud {
    margin: 10px 0px;
}

.tooltip-inner {
    white-space: pre-wrap;
}

.center-block {
    margin: 0px auto;
}

textarea {
    resize: none;
}

.lite-shadow {
    -webkit-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);
    -moz-box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);
    box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.5);
}

.bor-rad-5 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.bor-rad-10 {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
        margin-left: -1px;
        -webkit-border-radius: 0 6px 6px 6px;
        -moz-border-radius: 0 6px 6px 6px;
        border-radius: 0 6px 6px 6px;
    }

    .dropdown-submenu > a:after {
        display: block;
        content: " ";
        float: right;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 5px 0 5px 5px;
        border-left-color: #cccccc;
        margin-top: 5px;
        margin-right: -10px;
    }

    .dropdown-submenu:hover > a:after {
        border-left-color: #555;
    }

    .dropdown-submenu.pull-left {
        float: none;
    }

        .dropdown-submenu.pull-left > .dropdown-menu {
            left: -100%;
            margin-left: 10px;
            -webkit-border-radius: 6px 0 6px 6px;
            -moz-border-radius: 6px 0 6px 6px;
            border-radius: 6px 0 6px 6px;
        }

    .dropdown-submenu.on-left > .dropdown-menu {
        left: -100%;
    }

    .dropdown-submenu.on-left.ol-90 > .dropdown-menu {
        left: -90%;
    }

    .dropdown-submenu.on-left.ol-70 > .dropdown-menu {
        left: -70%;
    }

nav.navbar.pf-header {
    background-image: linear-gradient(to bottom, #EEEEEE 20%, #C5C5C5 90%);
}

.dropdown-menu > li > input {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

#sideBarToggler {
    position: fixed;
    padding: 15px;
    background-color: #274580;
    color: #fff;
    left: 0;
    z-index: 10;
}

    #sideBarToggler.open {
        left: 17.6666%;
    }

section.content > section.container-fluid > section.left-panel {
    -webkit-transition: width .7s ease;
    -o-transition: width .7s ease;
    transition: width .7s ease;
}

section.content > section.container-fluid > section.right-panel,
#sideBarToggler {
    -webkit-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

section.content > section.container-fluid > section.left-panel {
    z-index: 100;
    background: #F3F3F3;
    /*width: 16.6666%;*/
    overflow: hidden;
    margin-top: -20px;
    margin-left: -15px;
}

section.content > section.container-fluid > section.right-panel {
    margin-top: 50px;
}

section.content > section.container-fluid > section.left-panel.visible {
    width: 0%;
    padding: 0px;
}

section.content > section.right-panel {
    z-index: 7;
    background: #10213A;
    width: 100%;
}

section.left-panel > div#busqueda {
    padding: 10px;
}

section.left-panel > div.colectores > div.list-group > a {
    color: #bc2d08;
    font-weight: bold;
    -webkit-transition: color .5s ease, background .7s ease-out, padding .5s ease;
    -o-transition: color .5s ease, background .7s ease-out, padding .5s ease;
    transition: color .5s ease, background .7s ease-out, padding .5s ease;
}

    section.left-panel > div.colectores > div.list-group > a.active {
        background-color: #D4D4D4;
        color: #bc2d08;
        border: 1px solid #BFBFBF;
    }

    section.left-panel > div.colectores > div.list-group > a:hover {
        border-left: 7px solid #333;
        padding-left: 20px;
    }

section.right-panel > div#barraprocesos,
div#barraprocesos {
    text-align: center;
    font-weight: bold;
}

    section.right-panel > div#barraprocesos .breadcrumb,
    div#barraprocesos .breadcrumb {
        background: #a8a8a8;
    }

    section.right-panel > div#barraprocesos li.active > span,
    div#barraprocesos li.active > span {
        color: #bc2d08 !important;
    }

    section.right-panel > div#barraprocesos span,
    div#barraprocesos span {
        color: #fff !important;
    }

section.right-panel > #mensajesPush {
    background: #a8a8a8;
    padding: 10px;
    width: 160px;
    float: right;
    text-align: center;
}

    section.right-panel > #mensajesPush a {
        color: #fff;
        text-decoration: none;
        font-weight: bold;
    }

section.right-panel > #rectanguloredondeado,
#rectanguloredondeado {
    background: #F5F5F5;
    padding: 10px;
}

#voucherCopy {
    resize: none;
    min-height: 60px;
}

#voucher p {
    margin: 0px 0px 0px;
}

div#btnPrintWrap{
	left: 0% !important;
	text-align: center;
}
#voucher{
	background: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	overflow: hidden;
	max-width: 300px;
	margin: 0 auto;
	float: none;
}

#voucher header, #voucher #transInfo{
	margin-bottom: 20px;
}
#voucher #asteriks{
	font-size: 18px;
	margin-bottom: 0px;
}
#voucher #col-ser-Info{
	margin-top: -8px;
	margin-bottom: 20px;
}

    /*#voucher #col-ser-Info .row:first-child p{ /* NUEVO */
	/*margin-bottom: 20px;*/
/*}*/
    
#voucher #voucherFoot{
	margin-top: 15px;
}

#time, #timeM {    
    color: #B1161A;
    font-weight: bold;
    font-size:13px;
    display:block;
    text-align:center;
    margin-bottom:2px;
}

.username {
    margin-top:5px;
    width:100%!important;
    color: #02609C;
    font-weight: bold; 
    font-size:15px;
    text-align:center;
    display:block;
}

.username.mobile {
    margin-top:0px;
}

.icon-mail-on-ta {
    position: absolute;
    right: 20px;
    top: 65px;
}

.btn-grad-blue {
    color: #fff;
    font-weight: bold;
    background: rgba(4,118,194,1);
    background: -moz-linear-gradient(top, rgba(4,118,194,1) 0%, rgba(0,62,126,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(4,118,194,1)), color-stop(100%, rgba(0,62,126,1)));
    background: -webkit-linear-gradient(top, rgba(4,118,194,1) 0%, rgba(0,62,126,1) 100%);
    background: -o-linear-gradient(top, rgba(4,118,194,1) 0%, rgba(0,62,126,1) 100%);
    background: -ms-linear-gradient(top, rgba(4,118,194,1) 0%, rgba(0,62,126,1) 100%);
    background: linear-gradient(to bottom, rgba(4,118,194,1) 0%, rgba(0,62,126,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0476c2', endColorstr='#003e7e', GradientType=0 );
}

    .btn-grad-blue:hover {
        background: #003E7E;
    }

.rot-min-70 {
    -webkit-transform: rotate(-70deg);
    -ms-transform: rotate(-70deg);
    -o-transform: rotate(-70deg);
    transform: rotate(-70deg);
}

.glyphicon-mar-right {
    margin-right: 10px;
}

/* Para Ventana de confirmacion PF M y Recarga*/
#recarga-imprimir-modal .quest-icon > span.glyphicon,
#recarga-modal .quest-icon > span.glyphicon,
#confirm-modal .quest-icon > span.glyphicon {
    color: #3A72B1;
    font-size: 2.5em;
}

#recarga-imprimir-modal .quest-container,
#recarga-modal .quest-container,
#confirm-modal .quest-container {
    font-size: 16px;
}

#confirm-modal .bill-detail > .bill-item {
    padding-left: 10px;
    display: inline-block;
}

    #confirm-modal .bill-detail > .bill-item.bill-mont {
        padding-left: .6em;
        margin-left: 10px;
        font-size: 14px;
    }

/*login*/
#logIcon {
    margin: 0 auto;
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
/*-login*/
/*transxsuc*/
.wrap > #rectanguloredondeado {
    background: #F5F5F5;
    padding: 15px;
    margin: 0 auto;
}

.static-inline {
    display: inline-block;
}

/************Button Loading   ****************/
.glyphicon-refresh-animate {
    -webkit-animation: spin2 .7s infinite linear;
    -o-animation: spin2 .7s infinite linear;
    animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes spin2 {
    from {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes spin {
    from {
        -webkit-trasnform: scale(1) rotate(0deg);
        -moz-trasnform: scale(1) rotate(0deg);
        -ms-trasnform: scale(1) rotate(0deg);
        -o-trasnform: scale(1) rotate(0deg);
        trasnform: scale(1) rotate(0deg);
    }

    to {
        -webkit-transform: scale(1) rotate(360deg);
        -ms-transform: scale(1) rotate(360deg);
        -o-transform: scale(1) rotate(360deg);
        transform: scale(1) rotate(360deg);
    }
}
/************Button Loading   ****************/

/*-transxsuc*/
/*ventarecargas*/
.pf-rectanguloangular {
    background-color: #EEEEEE;
    padding: 20px 10px 20px 10px;
}

.btn-w-icon-left {
    position: relative;
}

    .btn-w-icon-left > span.glyphicon {
        position: absolute;
        left: 10px;
        top: 10px;
    }

.btn-lg.btn-w-icon-left > span.glyphicon {
    font-size: 1.5em;
}
/*ventarecargas*/
body > footer {
    position: fixed;
    bottom: 0px;
    top: auto;
    left: 0px;
    right: 0px;
    z-index: 3;
    text-align: center;
    background: #F4F4F4;
    border-top: 1px solid #ccc;
    font-size: 10px;
    color: #424242;
    height: 20px;
    font-weight: bold;
}

@media (max-width: 767px) {
    #sideBarToggler.open {
        left: 26%;
    }

    section.content > section.container-fluid > section.left-panel {
        width: 25%;
    }

    .xs.center-wrapper {
        text-align: center;
    }
    /*login*/
    #logIcon {
        width: 40%;
    }
    /*-login*/
    /*transxsuc*/
    .row.tablewrap {
        margin-top: 15px;
    }
    /*-transxsuc*/
}

@media (min-width: 767px) and (max-width: 992px) {
    #sideBarToggler.open {
        left: 33%;
    }

    .sm.center-wrapper {
        text-align: center;
    }

    #step2.bar-on div.form-horizontal > div {
        width: 100%;
    }
}

@media (max-width: 767px) and (max-height: 500px) {
    /*login*/
    body {
        padding-bottom: 50px;
    }
    /*-login*/
}

@media (max-width: 600px) {
    section.content > section.container-fluid > section.left-panel {
        width: 75%;
        position: absolute;
        /*z-index: 9;*/
    }

    section.content > section.container-fluid > section.right-panel {
        width: 100%;
    }

    #sideBarToggler.open {
        left: 75%;
    }
}

@media (max-width: 400px) {
    nav.navbar div.navbar-header a.navbar-brand {
        width: 68%;
    }

    nav.navbar div.navbar-header a.navbar-brand > img {
        width: 70% !important;
    }
}
@media (min-width: 401px) and (max-width: 500px) {
    nav.navbar div.navbar-header a.navbar-brand {
        width: 80%;
    }

    nav.navbar div.navbar-header a.navbar-brand > img {
        width: 65% !important;
    }
}
@media (max-width: 500px) {
    .loader-container > .loader {
        margin-top: 100px !important;
    }
    .hide-xxs {
        display: none;
    }

    .xxs-100p {
        width: 100% !important;
    }
    /*login*/
    #logIcon {
        width: 50%;
    }
    /*-login*/
}
