luos/workflow/public_html/css/general.css

.pm-charts-no-draw {
	font-size:16px;
	font-family:"Arial";
	font-weight:bold;
	width:200px;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	color:#e14333;
}

.status-graph-title-low,
.status-graph-title-medium,
.status-graph-title-high {
    text-align:center;
	font-size:17px;
    font-family: 'Chivo', sans-serif;
	width:90%;
	margin:0 auto;
	border:1px solid #eaeaea;
	margin-top:10px;
    border-radius: 5px;
}

.status-graph-title-low {
	background-color: #e14333;
}
.status-graph-title-medium {
	background-color:#fada5e;
}
.status-graph-title-high {
	background-color:#1fbc99;
}

.status-indicator-low,
.status-indicator-medium,
.status-indicator-high {
    padding:30px 0px 0px 0;
    color:#444;
    float:left;
}

.section-title {

}

.status-indicator-low {
  background-color: #e14333;
}
.status-indicator-medium {
  background-color: #fcb322;
}
.status-indicator-high  {
  background-color: #1fbc99;
}

.hideme {opacity:0;}

.pie-label {font-size:10px;}

.errorBar, .errorBarLowerMark, .errorBarUpperMark{
	stroke: blue;
	stroke-width: 1;
}

.x-ticks-label {
	font-size:10px;
	font-weight:normal;
	stroke: #000;
	fill: #000;
	-webkit-filter: drop-shadow( 0px 0px 0px #000 );
	filter: drop-shadow( 0px 0px 0px #000); /* Same syntax as box-shadow */

}

.y-ticks-label {
	font-size:10px;
	font-weight:normal;
	stroke: #000;
	fill: #000;
}

.axis-label {
	font-size:12px;
	font-weight:bold;
}

.line1 { 
	stroke: #A4B78A;
	stroke-width: 3;
	fill: none;

}

.line2 { 
	stroke: #eee;
	stroke-width: 2;
	fill: none;
}

.line-chart-point {
	stroke:#006E2E;
	fill: #006E2E;
	opacity:0.8;
	-webkit-filter: drop-shadow( -2px -2px 2px #000 );
	filter: drop-shadow( -2px -2px 2px #000); /* Same syntax as box-shadow */
}
.chart-background {
   background:#fff; 
	
} 


.das-title-selector {
	width:160px;
	text-overflow: ellipsis;
   	white-space: nowrap;
   	overflow:hidden;
}

.ind-title-selector {
	text-overflow: ellipsis;
   	white-space: nowrap;
   	/*overflow:hidden;*/
}

.ellipsis {
	text-overflow: ellipsis;
   	white-space: nowrap;
   	overflow:hidden;
}

img.floating {
	position:fixed;
	right:0;
	bottom:0;
	margin:0;
	padding:0;
	z-index:1000;
	opacity: 0.9;
	filter: alpha(opacity=90);
}





div.tooltipdiv {
    position: absolute;
    line-height: 1;
    font-weight: bold;     
    text-align: center;
    color: #fff;     
    width: 60px;          
    height: 28px;         
    padding: 10px;       
    font: 10px sans-serif;    
    background: rgba(0, 0, 0, 0.7); 
    border: 0px;    
    border-radius: 8px;     
    pointer-events: none;     
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  border-radius: 9px;
  pointer-events: none;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.7);
  position: absolute;
  pointer-events: none;  
}

/* Northward tooltips */
.d3-tip.n:after {
  content: "\25BC";
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
  text-align: center;
}

/* Eastward tooltips */
.d3-tip.e:after {
  content: "\25C0";
  margin: -4px 0 0 0;
  top: 50%;
  left: -8px;
}

/* Southward tooltips */
.d3-tip.s:after {
  content: "\25B2";
  margin: 0 0 1px 0;
  top: -8px;
  left: 0;
  text-align: center;
}

/* Westward tooltips */
.d3-tip.w:after {
  content: "\25B6";
  margin: -4px 0 0 -1px;
  top: 50%;
  left: 100%;
}
.grid-stack-item-content {
    background: white;
    color: #2c3e50;
    /*font-family: 'Indie Flower', cursive;*/
    text-align: center;
    font-size: 15px;
    border-color: 2px;
}

.grid-stack-item-content .fa {
    /*font-size: 64px;*/
    display: block;
    /*margin: 20px 0 10px;*/
}

header a, header a:hover { color: #fff; }

.darklue { background: #F2F2E0; color: #fff; }
.darklue hr.star-light::after {
    background-color: #F2F2E0;
}

.max {
  width:100%;
}


/****************************** Estilos de Indicadores *****************************/
.pricing-table {
width: 100%;
margin: 10px auto;
text-align: center;
padding: 0px;
padding-right: 0;
display:flex;
flex-direction: row;
flex-wrap: wrap;
justify-content:center;
}
.pricing-table .heading{
color: #9C9E9F;
text-transform: uppercase;
font-size: 1.3rem;
margin-bottom: 4rem;
}
.block{
width:100%;    
margin: 0 15px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;   
/*    border: 1px solid red;*/
}
/*Shared properties*/
.title,.pt-footer{
  font-family: Arial !important;
color: #FEFEFE;
text-transform: capitalize;
line-height: 2.5;
position: relative;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
}
.content{
width:100%;
height:115px;
color: #FEFEFE;
padding: 10px 0 10px 0;
overflow-y:hidden;
}
/*/arrow creation*/
.price{
position: relative;
display: inline-block;
margin-bottom: 0.625rem;
}
.price span{ 
font-family: Arial !important;   
font-size: 9.5rem !important;
letter-spacing: 1px;
position:relative;
top:-13px;
font-weight: bold;        
}
.price sup{
  font-family: Arial !important; 
  font-size: 2rem;    
  position: absolute;    
  top: 30px;
  left: -30px;
}
.hint{
  font-family: Arial !important; 
  font-style: italic;
  font-size: 1.7rem;
  position:absolute;
  top:117px;
  left:42%;
}
/*PERSONAL*/
  .indicator-color1 .title{        
  background: #0769B6;    
  }
  .indicator-color1 .content,.indicator-color1 .pt-footer{
  background: #1B7CC9;

  }
  .indicator-color1 .content:after{   
  border-top-color: #82DACA;  
  }
  .indicator-color1 .pt-footer:after{
  border-top-color: #FFFFFF;
  }
/*PROFESSIONAL*/
  .indicator-color2 .title{
  background: #0F768A;
  }
  .indicator-color2 .content,.indicator-color2 .pt-footer{
  background: #4CB6CA;

  }
  .indicator-color2 .content:after{   
  border-top-color: #53CFE9;  
  }
  .indicator-color2 .pt-footer:after{
  border-top-color: #FFFFFF;
  }
/*BUSINESS*/
  .indicator-color3 .title{
  background: #E37653;
  }
  .indicator-color3 .content,.indicator-color3 .pt-footer{
  background: #E4947B;

  }
  .indicator-color3 .content:after{   
  border-top-color: #EB6379;  
  }
  .indicator-color3 .pt-footer:after {    
  border-top-color: #FFFFFF;  
  }

/*PERSONAL*/
  .indicator-color4 .title{        
  background: #25943B;    
  }
  .indicator-color4 .content,.personal .pt-footer{
  background: #7FC585;
  }
  .indicator-color4 .content:after{   
  border-top-color: #82DACA;  
  }
  .indicator-color4 .pt-footer:after{
  border-top-color: #FFFFFF;
  }


table {
  background-color: transparent;
}
caption {
  padding-top: 8px;
  padding-bottom: 8px;
  color: #777;
  text-align: left;
}
th {
  background-color: #6AA985;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid #ddd;
}
.table > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid #ddd;
}
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th,
.table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td,
.table > thead:first-child > tr:first-child > td {
  border-top: 0;
}
.table > tbody + tbody {
  border-top: 2px solid #ddd;
}
.table .table {
  background-color: #fff;
}
.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
  padding: 5px;
}
.table-bordered {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  border: 1px solid #ddd;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
  border-bottom-width: 2px;
}
.table-striped > tbody > tr:nth-child(odd) {
  background-color: #f9f9f9;
}
.table-hover > tbody > tr:hover {
  background-color: #B0C4DE;
}
table col[class*="col-"] {
  position: static;
  display: table-column;
  float: none;
}
table td[class*="col-"],
table th[class*="col-"] {
  position: static;
  display: table-cell;
  float: none;
}
.table > thead > tr > td.active,
.table > tbody > tr > td.active,
.table > tfoot > tr > td.active,
.table > thead > tr > th.active,
.table > tbody > tr > th.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > tbody > tr.active > td,
.table > tfoot > tr.active > td,
.table > thead > tr.active > th,
.table > tbody > tr.active > th,
.table > tfoot > tr.active > th {
  /*background-color: #f5f5f5;*/
}
.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #e8e8e8;
}
.table > thead > tr > td.success,
.table > tbody > tr > td.success,
.table > tfoot > tr > td.success,
.table > thead > tr > th.success,
.table > tbody > tr > th.success,
.table > tfoot > tr > th.success,
.table > thead > tr.success > td,
.table > tbody > tr.success > td,
.table > tfoot > tr.success > td,
.table > thead > tr.success > th,
.table > tbody > tr.success > th,
.table > tfoot > tr.success > th {
  background-color: #dff0d8;
}
.table-hover > tbody > tr > td.success:hover,
.table-hover > tbody > tr > th.success:hover,
.table-hover > tbody > tr.success:hover > td,
.table-hover > tbody > tr:hover > .success,
.table-hover > tbody > tr.success:hover > th {
  background-color: #d0e9c6;
}
.table > thead > tr > td.info,
.table > tbody > tr > td.info,
.table > tfoot > tr > td.info,
.table > thead > tr > th.info,
.table > tbody > tr > th.info,
.table > tfoot > tr > th.info,
.table > thead > tr.info > td,
.table > tbody > tr.info > td,
.table > tfoot > tr.info > td,
.table > thead > tr.info > th,
.table > tbody > tr.info > th,
.table > tfoot > tr.info > th {
  background-color: #d9edf7;
}
.table-hover > tbody > tr > td.info:hover,
.table-hover > tbody > tr > th.info:hover,
.table-hover > tbody > tr.info:hover > td,
.table-hover > tbody > tr:hover > .info,
.table-hover > tbody > tr.info:hover > th {
  background-color: #c4e3f3;
}
.table > thead > tr > td.warning,
.table > tbody > tr > td.warning,
.table > tfoot > tr > td.warning,
.table > thead > tr > th.warning,
.table > tbody > tr > th.warning,
.table > tfoot > tr > th.warning,
.table > thead > tr.warning > td,
.table > tbody > tr.warning > td,
.table > tfoot > tr.warning > td,
.table > thead > tr.warning > th,
.table > tbody > tr.warning > th,
.table > tfoot > tr.warning > th {
  background-color: #fcf8e3;
}
.table-hover > tbody > tr > td.warning:hover,
.table-hover > tbody > tr > th.warning:hover,
.table-hover > tbody > tr.warning:hover > td,
.table-hover > tbody > tr:hover > .warning,
.table-hover > tbody > tr.warning:hover > th {
  background-color: #faf2cc;
}
.table > thead > tr > td.danger,
.table > tbody > tr > td.danger,
.table > tfoot > tr > td.danger,
.table > thead > tr > th.danger,
.table > tbody > tr > th.danger,
.table > tfoot > tr > th.danger,
.table > thead > tr.danger > td,
.table > tbody > tr.danger > td,
.table > tfoot > tr.danger > td,
.table > thead > tr.danger > th,
.table > tbody > tr.danger > th,
.table > tfoot > tr.danger > th {
  background-color: #f2dede;
}
.table-hover > tbody > tr > td.danger:hover,
.table-hover > tbody > tr > th.danger:hover,
.table-hover > tbody > tr.danger:hover > td,
.table-hover > tbody > tr:hover > .danger,
.table-hover > tbody > tr.danger:hover > th {
  background-color: #ebcccc;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}


div.ok   { position:relative;}
img.positioned  { position:absolute; height:28px; }
img#topright    { top:0;    right:0; }

.timepoint {
  background-color:red;
}


          #chart {                                                          /* NEW */
                  height: 360px;                                                  /* NEW */
                  position: relative;                                             /* NEW */
                  width: 360px;                                                   /* NEW */
                } 
            path.slice{
              stroke-width:2px;
            }
            polyline{
              opacity: .3;
              stroke: black;
              stroke-width: 2px;
              fill: none;
            } 
            svg text.percent{
              fill:white;
              text-anchor:middle;
              font-size:12px;
            }
            /*.tooltip {
              background: #eee;
              box-shadow: 0 0 5px #999999;
              color: #333;
              display: none;
              font-size: 12px;
              left: 130px;
              padding: 10px;
              position: absolute;
              text-align: center;
              top: 95px;
              width: 80px;
              z-index: 10;
            }*/
             .legend {
                  font-size: 12px;
                }
                rect {
                  stroke-width: 2;
                }

                .background {
              fill: #FFFFFF;
              fill-opacity: 0.01;
          }

          .component {
              fill: #e1e1e1;
          }

          .component .label {
              font-family: Myriad, "Helvetic Neue", Helvetica, Arial;
              text-anchor: middle;
              /*fill: #0000FF;*/
          }

          .arc {
              stroke-weight:0.5;
              /*fill: #000000;*/
          }


          .arc2 {
              stroke-weight:0.1;
              fill: #3660b0;
          }


          .label {
              font-family:  Myriad, "Helvetic Neue", Helvetica, Arial;
              text-anchor: middle;
          }

          .radial-svg {
              /*display: block;*/
              margin: 0 auto;
          }




 .grid 
  {
    stroke: black;
    stroke-opacity: 0.3;
    shape-rendering: crispEdges;
  }
  body {
    /*font: 10px Arial;
    font-weight:none;*/
    }

  text.shadow {
  stroke: #fff;
  stroke-width: 2.5px;
  opacity: 0.9;
  }


  .axis path,
  .axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
  }
  .grid path {
      stroke-width: 0;
  }

  /*.tooltip {                                                        /* NEW */
  /*  background: #eee;                                               /* NEW */
  /*  box-shadow: 0 0 5px #999999;                                    /* NEW */
  /*  color: #333;                                                    /* NEW */
  /*  display: none;                                                  /* NEW */
  /*  font-size: 12px;                                                /* NEW */
  /*  left: 110px;                                                    /* NEW */
  /*  padding: 10px;                                                  /* NEW */
  /*  position: absolute;                                             /* NEW */
  /*  text-align: center;                                             /* NEW */
  /*  top: 85px;                                                      /* NEW */
  /* width: 80px;                                                    /* NEW */
  /*  z-index: 10;                                                    /* NEW */
  /*}*/

.letter{
    background-image: url("../images/logo-proces-marker.png");
    background-position: center center;
    background-repeat: no-repeat;
    height: 150%;
    width: 100%;
}



/*------------header---------*/

.tick {
   stroke:blue;
   /*stroke-opacity: 0.3;*/
   font-size:10px;
   font-family:arial;
   font-weight:normal;
   /*text-shadow:1px 1px 1px #000;*/
}
.tick :Hover{
   stroke:#aaa;
   /*stroke-opacity: 0.3;*/
   font-size:10px;
   font-family:arial;
   font-weight:normal;
}




/*------------index--------------*/

.FormTitle{
  background: none repeat scroll 0 0 #888888;
    border-bottom: 1px solid #626262;
    color: #ffffff;
  }
.contact{
  background: none repeat scroll 0 0 #eeeeee;
  border-bottom: 1px solid #dddddd;
  color: #333;  
  } 







text.shadow {
  stroke: #fff;
  stroke-width: 2.5px;
  opacity: 0.9;
}


.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.grid .tick {
    stroke: lightgrey;
    stroke-opacity: 0.7;
    shape-rendering: crispEdges;
}
.grid path {
          stroke-width: 0;
}

.area {
  fill: lightsteelblue;
  stroke-width: 0;
}

.parea {
  fill: green;
  stroke-width: 0;
  opacity: 0.4;
}



.point-area2 {
  fill:gray;
  opacity: 1.0;
  stroke-width: 0;
}