body {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  overflow-x: hidden;
}

button {
  cursor: pointer;
}
.topPanel {
  /*background-color: rgb(97, 128, 153);*/
  background-color: steelblue;
  padding: 0.25%;
  color: white;
}
.topPanel > h3 {
  /*margin: 2px;*/
}
/* Container Divs */
.main {
  display: flex;
  /* Misc */
  /*border: 1px solid #cbd5e0;*/
  height: 100%;
  width: 100%;
}
.inputPanel {
  /*width: 10%;*/
  margin: 0.5%;
}
/* Recommendation CSS */
.recommendation_container {
  /*width: 45%;*/
  margin: 0.5%;
  background-color: white;
  z-index: 11;
}
.recommendation_panel_contents {
  width: 100%;
}
.recommended_template {
  width: 100%;
  max-height: 1000px;
  overflow: auto;
}
.recContainerRightNav {
  margin-left: -100px;
}

/* Dashboard Authoring CSS */
.composition_container {
  /*width: 35%;*/
  margin: 0.5%;
  max-height: 1000px;
}


.composition_panel {
  width: 100%;
  background: linear-gradient(90deg, white 21px, transparent 1%) center,
    linear-gradient(white 21px, transparent 1%) center, black;
  background-size: 22px 22px;
}

#dashboard_authoring_body {
height: 920px; 
 overflow: auto;
 padding: 5%;
}
/*  */
.interactionConfigPanel {
  /*width: 2%;*/
  margin: 0.5%;
}

/* Buttons and pills  */
.attribute_descriptor {
  text-align: left;
  font-size: x-small;
  color: grey;
  margin-top: -5%;
}

.attrBtn {
  text-align: left;
  font-size: smaller;
}

.collapseBtn {
  text-align: left;
}

.goal_selector {
  text-align: left;
  font-size: smaller;
}

.badgepill {
  /*background-color: rgb(205, 205, 205);*/
  background-color: rgb(234 234 234);
  font-weight: normal;
  border: 0.25px solid #e5e5e5;
}

.collectionIntentPill:hover{
  font-weight: bold;
}

#autoUpdate {
  font-size: smaller;
}

#refresh_recommendation {
  font-size: smaller;
}

/* Vis Container Template in Rec. Tem. */
.template {
  width: 100%;
  white-space: nowrap;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  margin: 0;
}
.template_body {
  border-style: solid;
  border-color: #f8f9fa;
}
.individual_vis_view {
  display: inline-block;
  cursor: pointer;
  min-height: 110px;
  text-align: center;
  width: 100%;
}
.individual_vis_view > canvas:hover {
  border: 1px solid #020202;
}
.template_vis_container {
  margin-top: 2%;
}
.template_body_views {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;

}
.template_body_widgets {
  min-height: 50px;
}
.individual_vis_view > canvas {
  cursor: pointer;
}

.template_description {
  /*color: rgb(147, 147, 147);*/
  font-size: smaller;
  margin: -2%;
}
.template_description_view_count{
  color: rgb(147, 147, 147);
  font-size: smaller;
  margin: 1%;
}

.template_header {
  cursor: pointer;
}

#inputPanelMessageContainer {
  display: none;
  margin: 0.5%;
  padding: 1%;
}
/* Special */
#spec_details {
  display: none;
}

.hide {
  display: none;
}

.disabled_icon {
  opacity: 0.5;
  color: grey;
  pointer-events: none;
  cursor: not-allowed !important;
}
.disablerParent{
  cursor: not-allowed !important; 
}
.disabler {
  pointer-events: none;
  opacity: 0.3;
}

.disablerWidget {
  pointer-events: none;
  opacity: 0.5;
}

.disabler > canvas {
  /* opacity: 0.3; */
  pointer-events: none;
}
.disabler > div {
  pointer-events: none;
}

/* .totalViewLabel{
  font-size: smaller;
  color: #e9e9e9;
} */

/* Widgets */
.multiselect-native-select {
  display: block;
  margin-top: 10%;
}
.individual_widget_view:hover {
  border: 1px black solid;
}
.individual_widget_view {
  cursor: pointer;
  min-height: 20px;
  font-size: small;
  margin: auto;
  /* border: 1px gainsboro solid; */
}
.template_widget_container {
  margin-top: 4%;
}
.widgetContents {
  margin: 3%;
}
.widgetSelectionBox {
  margin-top: 10%;
}

/* Tooltip */
#tooltipContainer {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #cbd5e0;
  z-index: 100;
  padding: 1%;
}

#tooltipForWidget {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #cbd5e0;
  z-index: 100;
  padding: 1%;
}

/* Dashboard Composition Styling */

/* .dashboard_canvas
{
  max-height: 920px;
  overflow-y:auto;
} */

.canvasCard {
  background-color: #ffffff;
  border: 1.5px solid #ffffff;
  cursor: move
}

.cardHeader {
  text-align: left;
  margin: 2%;
}
.cardText {
  user-select: none;
  border: 1px lightgray;
  color: gray;
  font-size: 12px;
  width:75%;
}

.cardCloseBtn {
  margin-left: 0.5%;
  margin-right: 0.5%;
  color: darkgray;
  float: right;
}

.invalidTargetCard {
  background-color: lightgrey;
  opacity: 0.5;
  cursor: not-allowed;
}

.focusSourceCard{
  border: 1.5px solid black;
}

.focusSourceCard .cardLinksBtn {
  /*background-color: black;*/
  /*color: gold;*/

  background-color: #555555FF;
  color: white;

  border-radius: 2.5px;
  /*border: 1px dashed black;*/
  border: 1px dashed #555555FF;
}
.focusSourceCard .cardLinksBtn:hover {
  color: white;
  border: 1px dashed #555555FF;
}

.cardLinksBtn {
  margin-left: 0.5%;
  margin-right: 0.5%;
  float: right;
  color: gray;
  border: 1px solid white;
}

.cardLinksBtn:hover{
  border: 1px dashed lightgrey;
  color: black;
}

.linkEndPoints {
  margin-left: 0.5%;
  margin-right: 0.5%;
  float: right;
  display: flex;
  flex-wrap: nowrap;
  color: gray;
}

.linkEndPoint {
  padding: 0.5px;
  border-radius: 2.5px;
  border: 1px dashed black;
  margin-left: 1%;
  margin-right: 1%;
  width: 20px;
  text-align: center;
}
.activeEndPoint {
  background-color: gold;
  border: 1px dashed;
  border-radius: 2.5px;
  color: black;
}

.linkEndPoint:hover{
  color: black;
}

.linkEndPoint.activeEndPoint:hover {
  color: black;
}

.leader-line {
  z-index: 10;
}

#selectedAttributes{
  display: flex;
}

#inputPanelMessageContainer{
  flex-wrap: wrap;
}

.focusIntent {
  /*border-radius: 3px;*/
  /*font-size: x-small;*/
  /*font-weight: bold;*/
}
.focusIntent.badgepill{
  /*background-color: #CDCDCD;*/
  padding: 5px;
}

.focusAttributesLabel{
  /*background-color: whitesmoke;*/
}

.focusAttribute {
  background-color: whitesmoke;
  border-radius: 2.5px;
  display: flex;
  margin-left: 5px;
  /*margin-right: 5px;*/
  padding-left: 2px;
}

.focusCAttr{
}

.colorGrid{
  width: 10px;
  height: 10px;
  margin-top: 7px;
  margin-right: 2px;
}

.colorGrid.thin{
  width: 15px;
  height: 8px;
  margin-top: 7px;
  margin-right: 2px;
}
.colorGrid.narrow{
  width: 8px;
  height: 8px;
  margin-top: 8px;
  margin-right: 2px;
}

/* DC Interaction Configuration */
.collapsibleHeader {
  background-color: #bdbdbd;
  color: white;
  cursor: pointer;
  padding: 2%;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: large;
}

.active,
.collapsibleHeader:hover {
  background-color: #555;
}
.collapsibleBody {
  padding: 2.5%;
  display: none;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: ghostwhite;
  max-height: 350px;
}

.linkRow {
  display: flex;
  flex-wrap: nowrap;
  height: 75px;
}
.linkRow.faded {
  opacity: 0.1;
  color: grey;
}

.sourceNodeDiv {
  width: 25%;
  padding-top: 7.5%;
}
.sourceNodeDiv.highlight {
  color: lightsteelblue;
}
.connectionDiv {
  width: 50%;
}

.linkTypeDropdown {
  background: none;
  border: none;
  color: gray;
  font-family: "FontAwesome", serif;
}

.targetNodeDiv {
  width: 25%;
  padding-top: 7.5%;
}
.targetNodeDiv.highlight {
  color: orange;
}
.sourceHighlight {
  border: 2px dashed lightsteelblue;
  opacity: 1;
}
.targetHighlight {
  border: 2px dashed orange;
  opacity: 1;
}

#nodePanelContainer{
  display: none;
  border-bottom: 1px solid lightgrey;
  padding: 5%;
  margin-bottom: 2.5%;
}
.chartOptionRow{
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 2.5%;
}
.chartOptionLabel{
  width: 35%;
  font-size: large;
  font-weight: bold;
}

#linksPanelContainer {
  display: none;
}

#dashboardCompositionHeaderTitle {
  display: flex;
  flex-wrap: nowrap;
}

#linkEditingStatusSpan{
  color: #555555;
  background-color: #e9e9e9;
  border-radius: 5px;
  display: none;
  margin-left: 2.5%;
  padding: 1.5%;
  font-size: small;
  border: 1px solid #555555;
}
#linkEditingStatusSpan i {
  font-size: small;
}

.addTemplateBtn {
  text-align: right;
}

#invisibleChartDiv{
  width: 200px;
  height: 200px;
  display: none;
}

.templateDatasummary
{
  margin-top: 10px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom:10px;
}

.scrollableItem
{
  overflow-x: auto;
  overflow-y: hidden;
}

.colorPaletteQAttrRow, .colorPaletteCAttrHeader{
  margin: 2.5%;
  display: flex;
  flex-wrap: nowrap;
  max-height: 20%;
  overflow-y: auto;
}
.colorPaletteCAttrSubRow{
  margin: 2% 0 2% 5%;
  display: flex;
  flex-wrap: nowrap;
}
.colorPaletteAttrLabel{
  width: 25%;
  font-weight: bolder;
}
.colorPaletteCategoryLabel{
  width: 30%;
  font-size: medium;
}

#colorPaletteModalBody{
  overflow-y: auto;
  max-height: 500px;
}
.widgetBox{
  /* z-index: 999; */
}

.widgetLabel{
  font-size: smaller;
}

.dsbody{
  padding-top: 5%;
}

.no_widgets_message{
  padding-left: 4%;
  padding-top: 4%;
}