/*
//
// Grafico Fases
//
*/

:root {
    --backgroud-color-gray: #777;
    --backgroud-color-fase_1: #5588c1;
    --backgroud-color-fase_2: #c40001;
    --backgroud-color-fase_3: #00b355;
    --backgroud-color-fase_4: #c6a800;
    --backgroud-color-fase_5: #ababab;
	--backgroud-color-fase_6: #9d4e09;
	--backgroud-color-fase_7: #558020;
    --backgroud-color-fase_8: #e67e30;
    --border-radius-fases: 8px;
}

.diagrama {
	position: absolute;
	_top: 0px;
	width: 520px;
	height: 390px;
    _border: 1px solid #bbb;
    _background-color: #eee;
}

.diagrama_filter {
    filter: grayscale(50%) opacity(10%);
}

.diagrama_fase_1 {
    position: absolute;
	left: 0px;
	top: 345px;
	width: 520px;
	height: 45px;
	border-radius: var(--border-radius-fases);
	background-color: var(--backgroud-color-fase_1);
}

.diagrama_fase_2 {
	position: absolute;
	left: 0px;
	top: 145px;
	width: 50px;
	height: 200px;
	border-radius: var(--border-radius-fases);
	background-color: var(--backgroud-color-fase_2);
}

.diagrama_fase_3 {
	position: absolute;
	right: 0px;
	top: 145px;
	width: 50px;
	height: 200px;
	border-radius: var(--border-radius-fases);
	background-color: var(--backgroud-color-fase_3);
}

.diagrama_fase_4 {
    position: absolute;
	left: 0px;
	top: 100px;
	width: 520px;
	height: 45px;
	border-radius: var(--border-radius-fases);
	background-color: var(--backgroud-color-fase_4);
}

.diagrama_fase_5 {
    position: absolute;
	left: 0px;
	top: 0px;
    width: 0px;    
    height: 0px;
	border-left: 260px solid transparent;
	border-right: 260px solid transparent;
    border-bottom: 100px;
    border-bottom-style: solid;
    border-bottom-color: var(--backgroud-color-fase_5);
}

.diagrama_fase_5_canvas {
    position: absolute;
    left: 0px;
	top: 0px;
    height: 100px;
	width: 520px;
}

.diagrama_fase_6 {
	position: absolute;
    z-index: 0;
	left: 220px;
	top: 215px;
	width: 80px;
	height: 130px;
	border-radius: 10px 10px 0px 0px;
	background-color: var(--backgroud-color-fase_6);
}

.diagrama_fase_6_detalhe_1 {
	position: absolute;
    z-index: 1;
	left: 230px;
	top: 270px;
	width: 13px;
	height: 13px;
	border-radius: 10px;
	background-color: white;
}


.diagrama_fase_7 {
	position: absolute;
    z-index: 0;
	left: 75px;
	top: 180px;
	width: 120px;
	height: 90px;
	border-radius: 10px;
	background-color: var(--backgroud-color-fase_7);
}

.diagrama_fase_7_detalhe_1 {
	position: absolute;
    z-index: 1;
	left: 85px;
	top: 190px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_7_detalhe_2 {
	position: absolute;
    z-index: 1;
	left: 140px;
	top: 190px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_7_detalhe_3 {
	position: absolute;
    z-index: 1;
	left: 85px;
	top: 229px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_7_detalhe_4 {
	position: absolute;
    z-index: 1;
	left: 140px;
	top: 229px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_8 {
    position: absolute;
    z-index: 0;
    left: 325px;
	top: 180px;
	width: 120px;
	height: 90px;
	border-radius: 10px;
	background-color: var(--backgroud-color-fase_8);
}

.diagrama_fase_8_detalhe_1 {
	position: absolute;
    z-index: 1;
	left: 335px;
	top: 190px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_8_detalhe_2 {
	position: absolute;
    z-index: 1;
	left: 390px;
	top: 190px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_8_detalhe_3 {
	position: absolute;
    z-index: 1;
	left: 335px;
	top: 229px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.diagrama_fase_8_detalhe_4 {
	position: absolute;
    z-index: 1;
	left: 390px;
	top: 229px;
	width: 47px;
	height: 32px;
	border-radius: 3px;
	background-color: white;
}

.popCardPieGraph {
    height: 155px;
    width: 150px;
    border: 1px solid #f5f5f5;
    margin: 0 3px;
    padding: 0;
    background-color: #f3f3f3;
}

.popTextPieGraph {
    display: flex;
    height: 25px;
    width: 100%;
    color: gray;
    font: 12px 'Helvetica Neue', Arial,Helvetica, sans-serif;
    font-weight: bold;
    align-items: center;
    justify-content: center;
}

.popPieGraph {
    height: 130px;
    width: 150PX;
}