
/* Placeholder styling */
.RacViewer #placeholder,
.RacViewer #placeholder-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
}

.RacViewer #placeholder-img {
  max-width: 100%;
  max-height: 100%;
}

.RacViewer #placeholder-overlay {
  border: solid 8px #bbb;
  text-align: left;
  padding: 10px;
  font-weight: bolder;
  font-size: 18px;
  opacity: 0.1;
  cursor: pointer;
}

.RacViewer #placeholder-overlay:hover {
  opacity: 0.2;
}

/* Shiny notification panels */
#shiny-notification-panel {
  right: auto;
  left: 0;
  bottom: auto;
  top: 0;
}

#shiny-disconnected-overlay {
  display : none;
}


/* Headings */
.RacViewer h1 {

}

.RacViewer h2 {

}

.RacViewer h3 {
  font-size: 80%;
  margin-top: 4px;
  margin-bottom: 6px;
  margin-left: 2px;
}


/* General classes */
.RacViewer .not-selectable {
  -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.RacViewer #info-div {
  position: absolute;
  top:  8px;
  left: 8px;
  font-size: 12px;
  background-color: transparent;
}

.RacViewer .point-info {
  margin-bottom: 12px;
}

.RacViewer #selection-info-panel::before {
    content: "Selected points";
    font-size: 18px;
    display: block;
    margin-bottom: 4px;
}

.RacViewer #loading-div {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: 100;
}

/* Classes for control btns */
.RacViewer .btn-icon-panel {
	font-size: 32px;
	margin-left: -2px;
}

.RacViewer .btn-icon {
	color: #222222;
	cursor: pointer;
  display: inline-block;
  margin-right: 6px;
  background-color: #eeeeee;
  border-radius: 4px;
  padding: 2px;
}

.RacViewer .btn-icon:hover {
	color : #33cccc;
  background-color: #555555;
}

.RacViewer .btn-icon-selected {
	background-color: #33cccc;
	color: #000000;
}

.RacViewer .btn-icon-selected:hover {
  background-color: #33cccc;
	color: #444444;
}

.RacViewer .btn-icon-disabled {
  cursor: default;
  background-color: #292929;
  color: #333333;
}

.RacViewer .btn-icon-disabled:hover {
  color: #333333;
  background-color: #292929;
}




.RacViewer .btn-link-panel {
	color: #ffffff;
	font-size: 14px;
	margin-top: 12px;
	margin-bottom: 12px;
}

.RacViewer .btn-link {
    cursor : pointer;
    display : inline-block;
    margin-right : 8px;
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.RacViewer .btn-link:hover {
	color : #33cccc;
}

.RacViewer .btn-link-disabled {
  cursor: default;
  color: #000000;
}

.RacViewer .btn-link-disabled:hover {
  color: #000000;
}

.RacViewer #stress-div {
    position: absolute;
    left: 8px;
    bottom: 8px;
    font-family: monospace, "Courier";
    font-size: 14px;
}


.RacViewer #color-by-div {
  font-size : 10px;
  margin-top : 6px;
  margin-bottom : 20px;
}


/* Popup boxes */
.RacViewer .popup-box {
  position : absolute;
  font-family : sans-serif, "Arial";
  font-size : 12px;
  background-color : #333333;
  color : #ffffff;
  padding : 12px;
  border-radius : 6px;
  bottom : 8px;
  right : 8px;
}
.RacViewer .graphic-box {

}

.RacViewer .filter-box {

}

.RacViewer .filter-opt-title {
    font-size: 16px;
    margin-bottom: 12px;
}

.RacViewer .filter-opt-col {
    display : block;
    vertical-align : top;
    margin-right: 18px;
    margin-bottom: 18px;
}


/* Sequence legend */
.RacViewer .sequence-legend {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

.RacViewer .sequence-legend table {
    margin-left: auto;
}
