/* Charts in Screen.css*/
.chartContainer { position: relative; }

.chartLegend { position: absolute; top: 10px; right: 10px; z-index: 4; padding-right: 35px; display: none; }

.chartLegendButton { width: 21px; height: 21px; position: absolute; top: 5px; right: 5px; z-index: 5; opacity: 0.6; cursor: pointer; }

.chartContainer .ui-chart-container { border: 0 !important; }

.chartTooltipContainer { padding: 5px; }

.chartTooltipIcon { width: 13px; height: 13px; vertical-align: middle; margin: 14px 15px 0 5px; }

.ui-chart-legend-item-badge { padding: 0 8px 0 4px; }

.ui-chart-piechart-container, .ui-chart-container { color: #A5A5A5; }

.agileEarnedValueFlex > div:first-of-type{
    flex: 1;
}
/* End Charts */

/* Board */

.boardContainer {
    position: relative;
}

.boardColumnHeader {
    padding-top: 10px;
    padding-bottom: 10px;
}

.boardColumnHeader, .boardColumn {
    min-width: 300px;
    max-width: 300px;
    background: #f5f5f5;
}

.boardColumn {
    padding-bottom: 5px;
}

.boardColumnHeader + .boardColumnHeader, .boardColumn + .boardColumn {
    margin-left: 5px;
}

.boardContentRow {
    margin-top: 5px;
}

.boardItem {
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    border: 1px;
    border-color: black;
    border-radius: 3px;
    border-style: solid;
}

.boardItem:hover {
    cursor: pointer;
}

.boardItemContent {
    max-width: 290px;
    padding: 5px;
    overflow-x: hidden;
}

.boardItemContentRow {
    max-width: 280px;
    overflow-x: hidden;
}

.boardItemContentRow[data-type=name] {
    font-weight: bold;
}

.boardItemContentRow[data-type=property] {
    max-height: 105px;
    white-space: pre-wrap;
}

.boardItemContentRow[data-type=interest] {
    color: #4B4B4B;
}

/* End Board*/

/* Earned Value*/
.valuecontainer .caption {
    height: 21px;
}
.valuecontainer .header, .valuecontainer .value { font-family: 'OpenSans Bold', 'Verdana', 'Arial', sans-serif; }
.chartcontainer .header, .valuecontainer .value, .valuecontainer .caption { white-space: nowrap; }
.valuecontainer .value, .valuecontainer .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/*.valuecontainer { display: inline-table; margin-right: 0; margin-bottom: 7px; padding: 0 7px; }*/
.valuecontainer { display: inline-table; margin-right: 0; margin-bottom: 0; padding: 0; }
.valuecontainer .header { color: #A5A5A5; }
.valuecontainer .value { text-align: center; overflow: visible; color: DimGrey; font-size: 1.6rem; line-height: 2rem; text-shadow: 0 1px 0px #ffffff; }
.valuecontainer .value.indicatorValue { color: #0097BE; }
.valuecontainer .value.indicatorValue.aheadOfSchedule { color: #90BC24; }
.valuecontainer .value.indicatorValue.behindOfSchedule { color: #B80D29; }
.valuecontainer .caption { color: #A5A5A5; }
/* Earned Value*/


/* Earned Value*/
.earnedvalueindicatorcontainer .caption { height: 21px; }
.earnedvalueindicatorcontainer .caption { overflow: visible; color: DimGrey; text-shadow: 0 1px 0px #ffffff; }
.earnedvalueindicatorcontainer .value { text-align: right; font-family: 'OpenSans Bold', 'Verdana', 'Arial', sans-serif; }
.earnedvalueindicatorcontainer .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*.earnedvalueindicatorcontainer .valuelabel { font-family: 'OpenSans Bold', 'Verdana', 'Arial', sans-serif; }
.earnedvalueindicatorcontainer .valuelabel { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    */

.earnedvalueindicatorcontainer { display: inline-table; margin-right: 0; margin-bottom: 0; padding: 0; }
.earnedvalueindicatorcontainer .valuelabel { color: #A5A5A5; line-height: 21px;text-align: right; font-family: 'OpenSans', 'Verdana', 'Arial', sans-serif; }
.earnedvalueindicatorcontainer .value { overflow: visible; color: DimGrey; text-shadow: 0 1px 0px #ffffff; }
.earnedvalueindicatorcontainer .value.indicatorValue { color: #0097BE; }
.earnedvalueindicatorcontainer .value.indicatorValue.aheadOfSchedule { color: #90BC24; }
.earnedvalueindicatorcontainer .value.indicatorValue.behindOfSchedule { color: #B80D29; }
.earnedvalueindicatorcontainer .caption { color: #A5A5A5; }
/* Earned Value*/

/* Doughnut Chart Inner Value*/
.doughnutChartInnerValue { font-family: 'OpenSans Bold', 'Verdana', 'Arial', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doughnutChartInnerValue.smallpane { font-size: 0.9rem; line-height: 1rem; text-shadow: 0 1px 0px #ffffff; }
.doughnutChartInnerValue.mediumpane { font-size: 1.3rem; line-height: 1.4rem; text-shadow: 0 1px 0px #ffffff; }
.doughnutChartInnerValue.largepane { font-size: 1.6rem; line-height: 2rem; text-shadow: 0 1px 0px #ffffff; }
.doughnutChartInnerValue { color: #0097BE; }

/* Doughnut Chart Inner Value*/
.chartDescription { height: 21px; }
.chartDescription { white-space: nowrap; }
.chartDescription { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chartDescription { color: #A5A5A5; }


.dashBoardView { background-color: #fff; }

.dashBoardToolbar { background-color: #fff;  }

.dashBoardItem {  background-color: #fff;border-color: #F5F5F5; border-width: 1px;border-style: solid;box-shadow: 2px 2px 7px 0px #ececec}

.dashBoardItemContentText, .dashBoardItemContentError { height: 21px; }
.dashBoardItemContentText { color: #A5A5A5; }
.dashBoardItemContentError { color: #B80D29; }

.dashBoardItemHeader{
  color: #F5F5F5;
  font-size: 0.8rem;
  height: 28px;
}

.dashBoardSectionBorder {
    border-bottom: 1px;
    border-bottom-color: gainsboro;
    border-style: solid;
}
.dashBoardPreviewItem { background-color: #d3d3d3; box-shadow: 2px 2px 7px 0px #ececec  }

.dashBoardPane .indicatorBar {
    padding-top: 4px;
    padding-bottom: 4px;
}

.dashBoardPane .diagramPanel .ui-widget-content {
    border-style: none;
}

.dashBoardPane .sectionHeaderBorder {
    border-bottom: 1px;
    border-bottom-color: gainsboro;
    border-style: solid;
}

.dashBoardPane .indicatorPanel {
    display: inline-block;
    margin-right: 4px;
    margin-bottom: 4px;

    background-color: #f5f5f5;
    border-style: solid;
    border-width: 1px;
    border-color: white;
    border-radius: 5px;
}

/*Neccessary for EditMode*/
.dashBoardPane .hidden {
    display: none;
}

.dashBoardPane .diagramPanel {
    margin-bottom: 40px;
    margin-right: 20px;
    margin-top: 8px;
    border-radius: 4px;
}

.dashBoardPane .previewPanel {
    margin-right: 8px;
    display: flex;
}

.dashBoardPane .header {
  /*font-family: Arial;*/
  text-align: center;
}

.dashBoardPane .header{
  font-size: 1rem;
}

.dashBoardPane .headerchart{
  color: #A5A5A5;
  font-size: 1rem;

  height: 28px;
}

.dashBoardPane .footerchart {
  color: #A5A5A5;
}

.chartLegendButton:hover {
    opacity: 1;
}

.dialogbutton svg {
    /* Fix für Edge - sonst werden keine Klick-Events auf SVG-Buttons geworfen */
    pointer-events: none;
}

.dialogbutton.dashBoardEditModeVisible {
    opacity: 0;
    display: none;
    visibility: collapse;   
}

.dashBoardEditMode .dashBoardPane:not(.collapsed) .dialogbutton.dashBoardEditModeVisible {
    opacity: 1;
    display: flex;
    visibility: visible;
}

.dialogbutton.dashBoardCopyConfigButton {
    opacity: 0;
    visibility: hidden;   
}

.dashBoardEditMode .dialogbutton.dashBoardCopyConfigButton {
    opacity: 1;
    display: inline-block;
    visibility: visible;    
}

.dialogbutton.dashBoardAddPaneButton {
    opacity: 0;
    visibility: hidden;   
}

.dashBoardEditMode .dialogbutton.dashBoardAddPaneButton {
    opacity: 1;
    display: inline-block;
    visibility: visible;    
}

.dialogbutton.dashBoardEditPropertiesButton {
    opacity: 0;
    visibility: hidden;   
}

.dashBoardEditMode .dialogbutton.dashBoardEditPropertiesButton {
    opacity: 1;
    /*display: inline-block;*/
    visibility: visible;    
}

.dialogbutton.dashBoardEditChartButton {
    opacity: 0;
    visibility: hidden;
}

.dashBoardEditMode .dialogbutton.dashBoardEditChartButton {
    opacity: 1;
    display: inline-block;
    visibility: visible;
}

.dashBoardPreviewItem {
    opacity: 0!important; 
    display: none!important; 
    visibility: collapse!important;     
}

.dashBoardEditMode .dashBoardPreviewItem {
    opacity: 1!important;
    display: flex!important; /* inline-block!important;*/
    visibility: visible!important;
}

.dashBoardEditMode * .chartLegendButton{
    display: none;
    visibility: collapse;
}

.dashBoardEditMode * .dashboardExpandGroupButton {
    display: none;
    visibility: collapse;
}

.dashBoardPane.collapsed .dashboardContent {
    display: none;
    visibility: collapse;
}

.dashBoardPane .dashboardExpandGroupButton > .smallicon {
    transform: rotate(-180deg);
    transition: all 0.3s ease;
}

.dashBoardPane.collapsed .dashboardExpandGroupButton > .smallicon {
    transform: rotate(0);
    transition: all 0.3s ease;
}

.dashBoardPane .ShowIndicators {
    display: none;
}

.dashBoardEditMode * .dashBoardEditModeButton{
    opacity: 0.7;
}

.dashBoardEditMode .disabled {
    z-index: 6;
    background: lightgray;
}

.selectDashBoardItemContainer > .popupMenuButton {
    line-height: 28px; 
    height: 28px; 
}

.selectDashBoardItemContainer.popup {
    width: 250px;      
}