/*Dashboard Css start added on 13.09.2017*/
.search-wrapper {
background:#f0f6f6;
border:1px solid #c8cece; padding:5px;
margin:0 3px;
text-align:right
}
.chart-panel {width:495px; height:350px; float:left; display:inline-block; border:1px solid #ddd; margin:3px; position:relative}
.chart-panel h4 {text-transform:uppercase; margin-top:5px; text-align:center; padding:2px; font-size:14px;     position: absolute;
    bottom: 5px;
    text-align: center;
    width: 100%;
    margin: 0;}


#main {
  float: left;
  width: 750px;
}

.breadcrumbs-container {
   list-style: none;
   overflow: hidden;
   font: 18px Helvetica, Arial, Sans-Serif;
}

.breadcrumbs-container li {
   float: left;
}

.breadcrumbs-container li a {
   color: white;
   text-decoration: none;
   font-size: 10px;
   padding: 15px 0 10px 55px;
   position: relative;
   display: block;
   float: left;
}

.breadcrumbs-container li a:after {
   content: " ";
   display: block;
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid;
   border-left-color: inherit;
   position: absolute;
   top: 50%;
   margin-top: -50px;
   left: 100%;
   z-index: 2;
}

.breadcrumbs-container li a:before {
   content: " ";
   display: block;
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid white;
   position: absolute;
   top: 50%;
   margin-top: -50px;
   margin-left: 1px;
   left: 100%;
   z-index: 1;
}

.breadcrumbs-container li:first-child a {
   padding-left: 10px;
}

#sidebar {
  float: right;
  width: 100px;
}

#sequence {
padding:5px; overflow:hidden;
}

#legend {
  padding: 10px 0 0 3px;
}

#sequence text, #legend text {
  font-weight: 600;
  fill: #fff;
  font-size:8px;
  white-space: pre-wrap;      /* CSS3 */   
white-space: -moz-pre-wrap; /* Firefox */    
white-space: -pre-wrap;     /* Opera <7 */   
white-space: -o-pre-wrap;   /* Opera 7 */    
word-wrap: break-word;      /* IE */
width:100px;

}
#sequence text {width:auto!important}
#chart {
  position: relative;
}

#chart path {
  stroke: #fff;
}

#explanation {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    text-align: center;
    color: #666;
    transform: translate(-50%, -50%);
}

#percentage {
  font-size: 2.5em;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: orange;
}

.solidArc:hover {
  fill: orangered ;
}

.solidArc {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.x.axis path {
  display: none;
}

.aster-score { 
  line-height: 1;
  font-weight: bold;
  font-size: 100%;
}

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

/* 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.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}


.AreaProgresswrapper {width:150px; margin-top:61px; position:relative; display:inline-block; vertical-align:top }
.AreaProgresswrapper h5{text-transform:uppercase; margin-top:5px; text-align:center; padding:2px; font-size:12px;}
    .AreaProgresswrapper path {stroke: #ccc;}
.dashboard-loader {position:absolute; width:100%; height:100%; opacity:0.8;
}

.dashboard-loader span {top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%); 
    background: url(Images/loader.gif);
    width: 75px;
    height: 75px;
    background-repeat: no-repeat;}

.bubbleChart {width:490px; height:320px;}

.w3-modal {
    z-index: 3;
    display: none;
    padding-top: 100px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
}
.w3-modal-content {
    margin: auto;
    background-color: #fff;
    position: relative;
    padding: 0;
    outline: 0;
    width: 950px;
}

.w3-container, .w3-panel {
    padding: 0.5em;
}
.w3-container h4 {padding: 0.5em;
    margin: 0;
    text-align: left;}

.w3-display-topright {
    position: absolute;
    right: 0.5em;
    top: 0.3em;
}
.w3-btn, .w3-button {
    border: none;
    display: inline-block;
    outline: 0;
    padding: 0.3em 0.5em;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    font-size:12px;
}
    .w3-button:hover {background:#0c588a; color:#fff;}

#PendingforSignoffs .legend {
  fill: black;
  font: 14px sans-serif;
  text-anchor: start;
  font-size: 12px;
}

#PendingforSignoffs text {
  fill: white;
  font: 10px sans-serif;
  text-anchor: end;
}

#PendingforSignoffs .label {
  fill: black;
  font: 14px sans-serif;
  text-anchor: end;
}

#PendingforSignoffs .bar:hover {
  fill: brown;
}

#PendingforSignoffs .axis path,
#PendingforSignoffs .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.no-progress-wrapper {position:absolute; text-align:center; height:100%; width:100%; padding-top:20%; top:0; }
.no-progress-full-wrapper {position:absolute; text-align:center; height:50%; width:100%; padding-top:20%; top:0; }
.download-trigger {position:absolute; right:30px; top:7px;}
.download-trigger img {cursor:pointer; height:20px;}
.no-progress-wrapper h3.txtMsg {padding:0; margin:0; font-size:12px; text-transform:uppercase}
.system-grid-container{ max-height: 400px; overflow: auto;}
#systemTriggerWrappper {position: absolute;right: 5px; max-width:250px;}
/*#systemTriggerWrappper label {display:block;}*/
#systemTriggerWrappper label input {vertical-align:middle}

.chart-panel-full .bar{
    fill: steelblue;
  }

  .chart-panel-full .bar:hover{
    fill: brown;
  }

	.chart-panel-full .axis {
	  font: 10px sans-serif;
	}

	.chart-panel-full .axis path,
	.chart-panel-full .axis line {
	  fill: none;
	  stroke: #000;
	  shape-rendering: crispEdges;
	}
    .chart-panel-full .axis line {
	  fill: none;
	  stroke: transparent;
	  shape-rendering: crispEdges;
	}
        .chart-panel-full {width:997px; margin:3px; border:1px solid #ddd; min-height:365px; position:relative
        }
    .chart-panel-full .chart-panel {width:490px; height:350px; float:left; display:inline-block; border:none; margin:0; position:relative}
    .chart-panel-full h4 {text-transform:uppercase; bottom:5px; position:absolute; margin-top:5px; text-align:center; padding:2px; font-size:14px; 
    text-align: center;
    width: 100%;
    margin: 0;}

#divpunchList .chart-panel text {font-size:9px;}

.chart-active {fill:#078de4!important; stroke:#FFA500!important;}
.text-active {font-weight:bold; font-size:10px; }

#PuchListBarChart path {  stroke: #fff; }
#PuchListBarChart path:hover {  opacity:0.9; }
#PuchListBarChart rect:hover {  fill:blue; }
#PuchListBarChart .axis {  font: 10px sans-serif; }
#PuchListBarChart .legend tr{    border-bottom:1px solid grey; }
#PuchListBarChart .legend tr:first-child{    border-top:1px solid grey; }

#PuchListBarChart .axis path,
#PuchListBarChart .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

#PuchListBarChart .x.axis path {  display: none; }
#PuchListBarChart .legend{
    margin-bottom:76px;
    display:inline-block;
    border-collapse: collapse;
    border-spacing: 0px;
}
#PuchListBarChart .legend td{
    padding:4px 5px;
    vertical-align:bottom;
}
#PuchListBarChart .legendFreq, .legendPerc{
    align:right;
    width:50px;
}
.chart-panel-full-width {width:1000px!important;
}

ul.str-grid-top-action { position:relative; display:flex; align-items:center; list-style:none;}
ul.str-grid-top-action li {margin:0 5px;}
.inline-checkbox-text { display:flex}
.margin-right-label { margin-right:5px;}