body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.widget {
   
    position: relative;
    float:left;
    overflow:hidden;
    border-radius: 25px;
    border: 2px solid #007dc3;
    max-width:450px;
    padding:0px;
    /*max-width:350px;*/
    top:5px;
     background: #ffffff;
    /*padding:5px;*/
    /*margin-left:20px;*/
    margin-top: 15px;
    margin-left:15px;
    margin-bottom:15px;
    margin-right:-4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   box-sizing: border-box;
    
}

.detalle {
   background-color:white;
    position: relative;
    float:left;
    border-radius: 10px;
    border: 2px solid #ffffff;
    max-width:400px;
    padding:4px;
    color:black;
    /*max-width:350px;*/
    top:5px;
    background: #ffffff;
    /*padding:5px;*/
    /*margin-left:20px;*/
    margin-top: 15px;
    margin-left:15px;
    margin-bottom:15px;
    margin-right:-4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   box-sizing: border-box;
    
}

.agujas {
   background-color:yellow;
    position: relative;
    float:left;
    border-radius: 10px;
    border: 2px solid #ffffff;
    max-width:900px;
    padding:4px;
    color:black;
    /*max-width:350px;*/
    top:5px;
    background: #ffffff;
    /*padding:5px;*/
    /*margin-left:20px;*/
    margin-top: 15px;
    margin-left:15px;
    margin-bottom:15px;
    margin-right:-4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
   box-sizing: border-box;
    
}


.detalle table   {
    border-width:1px;
    border-style:solid;

}



.detalle h5 {text-align:center}
.detalle th {padding:4px 4px 4px 4px}

.detalle  td {
    border-width:1px;
    border-style:solid;
    padding:3px;
}
.chart-legend ul {
    list-style: none;
    width: 100%;
    margin: 10px auto 0;
}
.chart-legend li {
    text-indent: 16px;
    line-height: 24px;
    position: relative;
    font-weight: 200;
    display: block;
    float: left;
    width: 50%;
    font-size: 0.8em;
}
.chart-legend  li:before {
    display: block;
    width: 10px;
    height: 16px;
    position: absolute;
    left: 0;
    top: 3px;
    content: "";
}
.MesAct:before { background-color: #00549f; }
.MesAnt:before { background-color:rgba(73,188,170,0.4); }
.admin:before { background-color: #dbba34; }
.prod:before { background-color: #c62f29; }
.Verde:before { background-color: #99FF33; }
.AzulClaro:before { background-color: #99CCFF; }
.Amarillo:before { background-color: #FFFF00; }
.Rojo:before { background-color: #FF6666; }

.widget p {
    margin-top: 0;
    text-align: center;
}
.widget h4  {
    
    position:relative;
    top:-2px;
    left:-2px;
    right:-4px;
        border-top-right-radius: 25px;border-top-left-radius:25px;border:2px solid #007dc3;
    margin: 0;
    margin-right:-4px;
    margin-bottom:15px;
    /*padding: 12px;*/
    max-width:inherit;
    text-align: center;
    color: #627b86;
    line-height: 2em;
    background: #d0dde3;
}
.widget.line p span {
    color: #dbba34;
}
.widget.line p strong {
    color: #637b85;
    font-weight: 400;
}

#circluloVerde {
    position:relative;
    width: 20px;
    height: 20px;
    border-width:3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    background-color:#00cc00;
    border-color:black;
}
#circluloAmarillo {
    position:relative;
    width: 20px;
    height: 20px;
    border-width:3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background-color:#ffff00; 
    border-color:black;
}
#circluloRojo {
    position:relative;
    width: 20px;
    height: 20px;
    border-width:3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px; 
    background-color:#ff0000;
    border-color:black;
}

body {
    color: #444444;
}
header {
    background: #FFFFFF;
    padding: 15px 0 0 0;
    margin: 0;
}
header .main-header {
    padding: 0 0 15px 0;
    display: table;
}
header .logo-container {
    display: table-cell;
}
header .header-bg {
    border-top-style: ridge;
    border-top-width: 3px;
    margin: 0;
}
header .header-bg img {
    width: 100%;
}
header .header-menu {
    text-align: right;
    display: table-cell;
    position: relative;
    top: -2px;
}
header .header-menu .user-greet {
    position: relative;
    top: -10px;
}
header .header-menu .user-greet span {
    margin: 0 5px;
    color: #00589c;
}
header .header-menu .user-greet span:last-child {
    margin-right: 0;
}
header .header-menu ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}
header .header-menu ul li {
    display: inline-block;
    margin: 0 10px;
}
header .header-menu ul li:last-child {
    margin-right: 0;
}
header .header-menu ul li a {
    color: #111111;
    text-transform: uppercase;
}
main {
    background: #F6F1EE;
    padding-bottom: 60px;
}
main .row {
    margin-bottom: 20px;
}
main .block {
    background: #FFFFFF;
    padding: 25px 25px 15px 25px;
}
main .block .block-title {
    padding: 0 0 15px 10px;
}
main .block .block-title span {
    font-weight: bold;
    color: #596573;
    font-size: 16px;
    vertical-align: middle;
    position: relative;
    top: -25px;
    left: 18px;
}
main .block table {
    width: 90%;
}
main .block table thead {
    border-bottom: 1px solid #9b9b9b;
}
main .block table.small-table th {
    font-size: 14px;
    padding: 4px 4px;
}
main .block table.small-table td {
    padding: 4px 4px;
    font-size: 10px;
}
main .block table th {
    color: #333333;
    font-size: 15px;
    font-weight: normal;
}
main .block table td, main .block table th {
    padding: 4px 10px;
}
main .block table tr.odd {
    background: #F6F1EE;
}
main .double-block .block {
    background: none;
}
main .double-block .block:first-child {
    padding-left: 0;
}
main .double-block .block:last-child {
    padding-right: 0;
}
main .double-block .block .inner-block {
    background: #FFFFFF;
    padding: 25px;
}
main form.form-solicitud {
    width: 100%;
    border-left: 1px solid #EFEFEF;
}
main .form-title, main form.form-solicitud {
    padding-left: 25px;
}
main form.form-solicitud input[type='text'] {
    display: inline-block;
}
main form.form-solicitud input[type='text'], main form.form-solicitud textarea {
    background: #EFEFEF;
    border-radius: 4px;
    display: inline-block;
    width: 100%;
    margin-bottom: 8px;
    border-width: 1px;
    padding: 4px 10px;
    border-top-width: 2px;
    border-top-style: outset;
    border-top-color: #B0B0B0;
}
main form.form-solicitud button[type='submit'] {
    border-radius: 0;
    background: #00589C;
    text-transform: uppercase;
}
footer {
    background: #596573;
    padding: 30px 0;
}
footer > div.container {
    border-top: 1px solid #9AAABD;
    padding-top: 15px;
}
footer, footer span, footer li, footer a {
    color: #9AAABD;
    text-transform: uppercase;
}
footer ul li {
    display: inline-block;
    margin: 0 10px;
}
.icon {
    background-image: url('img/icons.png');
    background-repeat: no-repeat;
    display: inline-block;
}

.icon-balance {
    width: 69px;
    height: 69px;
    background-position: -5px -5px;
}

.icon-consumos {
    width: 69px;
    height: 69px;
    background-position: -84px -5px;
}

.icon-historial-de-pagos {
    width: 69px;
    height: 69px;
    background-position: -5px -84px;
}

.icon-nueva-solicitud {
    width: 69px;
    height: 69px;
    background-position: -84px -84px;
}

.icon-servicio-al-cliente {
    width: 69px;
    height: 69px;
    background-position: -163px -5px;
}

.tabla {
    align-content:center;margin-left:auto;margin-right:auto;table-layout:fixed;
    border-width:2px;border-collapse:collapse;border: 1px solid black;
    }
.tabla tr {
    padding:5px;text-align:center;border-width:2px;border-collapse:collapse;border: 1px solid black;
}
    .tabla th {
        padding: 5px;
        text-align: center;
        border-width: 2px;
        border-collapse: collapse;
        border: 1px solid black;
        width: 85px;
        font-size:11px;font-weight:bold;
    }
.tabla td {
    padding:5px;text-align:center;border-width:2px;border-collapse:collapse;border: 1px solid black;width:85px;font-weight:bold;
}