#ruler { visibility: hidden; white-space: nowrap; }

:root{
  --arpeggio-navy:#242d63;
  --arpeggio-blue:#2AAADC;
  --arpeggio-success:#15CD72;
  --arpeggio-danger:#EB3A45;
  --arpeggio-info:#288feb;
  --muted-background: rgb(247, 202, 201,0.25);
  --muted-background-2: rgb(247, 202, 201,0.6);
  --muted-background-3: rgb(247, 202, 201,1);
  --light-blue:#EEFBFB;
}


.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: grey;
  opacity: 0.25; /* Firefox */
}
.upload {
  float: left;
  width: 30%;
  height: 500;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  padding-bottom: 20px;
  background: #fff;
  animation: fadeup 1s 0s ease both;
  transform: translateY(20px);
  opacity: 0;
  margin-left: calc(50% - 15%);
  margin-top: 30;
}
.upload .upload-files header {
  background: #4db6ac;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  text-align: center;
}
.upload .upload-files header p {
  color: #fff;
  font-size: 40px;
  margin: 0;
  padding: 50px 0;
}
.upload .upload-files header p i {
  transform: translateY(20px);
  opacity: 0;
  font-size: 30px;
  animation: fadeup 0.5s 1s ease both;
}
.upload .upload-files header p .up {
  font-weight: bold;
  transform: translateX(-20px);
  display: inline-block;
  opacity: 0;
  animation: faderight 0.5s 1.5s ease both;
}
.upload .upload-files header p .load {
  display: inline-block;
  font-weight: 100;
  margin-left: -8px;
  transform: translateX(-20px);
  opacity: 0;
  animation: faderight 1s 1.5s ease both;
}
.upload .upload-files .body {
  text-align: center;
  padding: 50px 0;
  padding-bottom: 30px;
}
.upload .upload-files .body.hidden {
  display: none;
}
.upload .upload-files .body input {
  visibility: hidden;
}
.upload .upload-files .body i {
  font-size: 65px;
  color: lightgray;
}
.upload .upload-files .body p {
  font-size: 14px;
  padding-top: 15px;
  line-height: 1.4;
}
.upload .upload-files .body p b, .upload .upload-files .body p a {
  color: #4db6ac;
}
.upload .upload-files .body.active {
  border: dashed 2px #4db6ac;
}
.upload .upload-files .body.active i {
  box-shadow: 0 0 0 -3px #fff, 0 0 0 lightgray, 0 0 0 -3px #fff, 0 0 0 lightgray;
  animation: file 0.5s ease both;
}
@keyframes file {
  50% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -8px 8px 0 -3px #fff, -8px 8px 0 lightgray;
 }
  75%, 100% {
    box-shadow: -8px 8px 0 -3px #fff, -8px 8px 0 lightgray, -16px 16px 0 -3px #fff, -16px 16px 0 lightgray;
 }
}
.upload .upload-files .body.active .pointer-none {
  pointer-events: none;
}
.upload .upload-files footer {
  width: 100%;
  margin: 0 auto;
  height: 0;
}
.upload .upload-files footer .divider {
  margin: 0 auto;
  width: 0;
  border-top: solid 4px #46aba1;
  text-align: center;
  overflow: hidden;
  transition: width 0.5s ease;
}
.upload .upload-files footer .divider span {
  display: inline-block;
  transform: translateY(-25px);
  font-size: 12px;
  padding-top: 8px;
}
.upload .upload-files footer.hasFiles {
  height: auto;
}
.upload .upload-files footer.hasFiles .divider {
  width: 100%;
}
.upload .upload-files footer.hasFiles .divider span {
  transform: translateY(0);
  transition: transform 0.5s 0.5s ease;
}
.upload .upload-files footer .list-files {
  width: 320px;
  margin: 0 auto;
  margin-top: 15px;
  padding-left: 5px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 210px;
}
.upload .upload-files footer .list-files::-webkit-scrollbar-track {
  background-color: rgba(211, 211, 211, .25);
}
.upload .upload-files footer .list-files::-webkit-scrollbar {
  width: 4px;
  background-color: rgba(211, 211, 211, .25);
}
.upload .upload-files footer .list-files::-webkit-scrollbar-thumb {
  background-color: rgba(77, 182, 172, .5);
}
.upload .upload-files footer .list-files .file {
  width: 300px;
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  opacity: 0;
  animation: fade 0.35s ease both;
}
.upload .upload-files footer .list-files .file .name {
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 80px;
  text-align: left;
}
.upload .upload-files footer .list-files .file .progress {
  width: 175px;
  height: 5px;
  border: solid 1px lightgray;
  border-radius: 2px;
  background: linear-gradient(to left, rgba(77, 182, 172, .2), rgba(77, 182, 172, .8)) no-repeat;
  background-size: 100% 100%;
}
.upload .upload-files footer .list-files .file .progress.active {
  animation: progress 30s linear;
}
@keyframes progress {
  from {
    background-size: 0 100%;
 }
  to {
    background-size: 100% 100%;
 }
}
.upload .upload-files footer .list-files .file .done {
  cursor: pointer;
  width: 40px;
  height: 40px;
  background: #4db6ac;
  border-radius: 50%;
  margin-left: -10px;
  transform: scale(0);
  position: relative;
}
.upload .upload-files footer .list-files .file .done:before {
  content: "View";
  position: absolute;
  top: 0;
  left: -5px;
  font-size: 24px;
  opacity: 0;
}
.upload .upload-files footer .list-files .file .done:hover:before {
  transition: all 0.25s ease;
  top: -30px;
  opacity: 1;
}
.upload .upload-files footer .list-files .file .done.anim {
  animation: done1 0.5s ease forwards;
}
.upload .upload-files footer .list-files .file .done.anim #path {
  animation: done2 2.5s 0.5s ease forwards;
}
.upload .upload-files footer .list-files .file .done #path {
  stroke-dashoffset: 7387.5942382813;
  stroke-dasharray: 7387.5942382813 7387.5942382813;
  stroke: #fff;
  fill: transparent;
  stroke-width: 50px;
}
@keyframes done2 {
  to {
    stroke-dashoffset: 0;
 }
}
@keyframes done1 {
  50% {
    transform: scale(0.5);
    opacity: 1;
 }
  80% {
    transform: scale(0.25);
    opacity: 1;
 }
  100% {
    transform: scale(0.5);
    opacity: 1;
 }
}
.upload .upload-files footer .importar {
  width: 125px;
  outline: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  margin: auto;
  border: solid 1px #4db6ac;
  color: #4db6ac;
  background: transparent;
  padding: 8px 15px;
  font-size: 12px;
  border-radius: 4px;
  font-family: Roboto;
  line-height: 1;
  cursor: pointer;
  transform: translateY(15px);
  opacity: 0;
  visibility: hidden;
}
.upload .upload-files footer .importar.active {
  transition: transform 0.5s 1.5s ease, opacity 0.5s 1.5s ease, background;
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.upload .upload-files footer .importar:hover {
  background: #4db6ac;
  color: #fff;
}
@keyframes fadeup {
  to {
    transform: translateY(0);
    opacity: 1;
 }
}
@keyframes faderight {
  to {
    transform: translateX(0);
    opacity: 1;
 }
}
@keyframes fade {
  to {
    opacity: 1;
 }
}
@media (max-width: 400px) {
  .upload {
    width: 100%;
    height: 100%;
 }
}


@font-face {
  font-family: 'Lato';
  src: url('/static/fonts/Lato/Lato-Regular.ttf') format('truetype');
}

* {
    font-family: 'Lato';
  }

.categoryWrapper{
}

.theActualDescription{
  cursor: text;
}

.captureImageOutline{
  outline:1px dashed grey  !important;
  border: none !important;
  pointer-events: all !important;
}
.captureImageOutline:hover{
  outline:4px dashed black  !important;
  border: none !important;
  cursor: pointer !important;
}
.addImage{
  float:right;
  width:150px;
  height:150px;
  border:3px dashed grey;
  border-radius:15px;
  background-color: white;
  transition: all 0.3s linear;
  color:black;
  cursor: pointer;
}
.addImage:hover{
  background-color: var(--muted-background);
  transition: all 0.3s linear;
}
.faqQuestion{
  border-top: 0.5px solid var(--muted-background-3);
  border-bottom: 0.5px solid var(--muted-background-3);
  margin-bottom: 20px;
  float:left;
  width:100%;
  padding: 10px;
  transition: all 0.3s linear;
  cursor: pointer;
  height: 45px;
  overflow: hidden;
}

.faqQuestion:hover{

}
.faqQuestionClicked{
  height: 500px;
  overflow: auto;
  transition: all 0.3s linear;
}
.faqQuestionActualClicked{
}
.faqQuestionActual{
  float:left;
  width:100%;
  font-size:16px;
  height: auto;
}
.faqAnswerActual{
  margin-top:20px;
  float:left;
  width:100%;
  height: auto;

}
.faqCategory{
  float:left;
  padding:5px;
  border-radius: 5px;
  width: 100%;
  overflow: hidden;
  font-size:18px;
  margin-bottom:20px;
  color:var(--muted-background-3);
  transition: all 0.3s linear;
  cursor: pointer;
}
.faqCategory:hover{
  color:black;
  transition: all 0.3s linear;
}
.simpleTableHeaderWrapper{
  float:left;
  width:100%;
  height:40px;
  padding:8px;
  color:grey
}
.simpleTableHeader{
  float:left;
  display:in-line;
  height:100%;
  font-weight:bold
}
.simpleTableRow{
  float:left;
  width:100%;
}

.simpleTableCell{
  float:left;
}


.dropdown-item{
  font-size: 14px !important;
}
.bootstrap-select .btn {
  font-size: 14px;
}
.bootstrap-select{
  height: 22px;
}
.dropdown{
  height: 22px;
}
.selectpicker{
  height: 22px;
}

.sortOption{
  opacity: 0.5;
}
.sortOptionChecked{
  opacity: 1;
}
.theCells{
  font-size: 10px;
}
.theZFactorHolder{
  margin-top: 2;
  font-size: 10px;
}
.controlLabelTheCells{
  display: inline;
  padding-left: 1px;
}
.navFigure{
  border: 2.5px solid #e6eaf0;
  border-radius:5px;
  margin-bottom: 20px;
  cursor:pointer;
  position:absolute;
  width:160px;
  height:120px;
  overflow:hidden;
  z-index: 4;
  padding:5px;
  transition: linear all .2s;
  background-color: white;
}
.navFigure:hover{
  border: 2.5px solid #242d63;
}
.navFigureClicked{
  border: 2.5px solid #EDE04D !important;
  opacity: 1;
}
.placeHolder{
  border-top: 5.5px solid #242d63 !important;
  opacity: 1;
}
.linePath {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}


.sampleWrapper{
  float:left;
  width:95%;
  height: 70px;
  margin-bottom: 30px;
  padding:10px;
  cursor: pointer;
  transition: linear all .3s;
  overflow: hidden;
  padding: 10px;
}
.sampleWrapper:hover{
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: linear all .3s;
}

.pipelineTemplate{
  float:left;
  width:90%;
  margin-left:5%;
  margin-bottom: 5px;
  padding:5px;
  height: 35px;
}
.pipelineTemplate:hover{
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: linear all .3s;

}
.sampleDescription{
  float:left;
  width:80%;
  margin-bottom: 5px;
  font-size: 20px;
  overflow: hidden;

}
.sampleSubTitle{
  float:left;
  width:80%;
  font-size: 12px;
  overflow: hidden;
  font-size:12px'
}
.samplePipelines{
  float:left;
  width:90%;
  height: 200px;
  font-size: 16px;
  margin-top:20px;
  overflow: scroll;

}
.messageHomeWrapperHeader{
  float:left;
  width:90%;
  height: 50px;
  margin-bottom: 30px;
  padding:10px;
  transition: linear all .3s;
  overflow: hidden;

}
.versionHistory{
  float:left;
  width:100%;
  height: auto;
  margin-bottom: 30px;
  padding:10px;
  cursor: pointer;
  transition: linear all .3s;
  border: 0.5px solid #cccccc;

}
.versionHistory:hover{
  cursor: pointer;
  box-shadow: 0 1px 15px rgba(0,0,0,0.1);
  transition: linear all .2s;
}
.messageHomeWrapper{
  float:left;
  width:90%;
  height: 50px;
  margin-bottom: 30px;
  padding:10px;
  cursor: pointer;
  transition: linear all .3s;
  overflow: hidden;
  border: 0.5px solid #e6eaf0;

}
.messageHomeWrapper:hover{
  cursor: pointer;
  box-shadow: 0 1px 15px rgba(0,0,0,0.1);
  transition: linear all .2s;
}
.messageBoxHeader{
  float:left;
  width:50%;
  height:100%;
  font-size: 20px;
}
.messageBoxHeader i{
  cursor: pointer;
}

.messageBox{
  float:left;
  width:10%;
  height:100%;
  font-size: 20px;
}
.messageBox i{
  cursor: pointer;
}
.messageBoxRead{
  float:right;
  height:50%;
  margin-bottom: 5px;
  font-size: 10px;
}
.messageBoxSentDate{
  float:left;
  height:50%;
  font-size: 10px;
}
.fa.unread{
  color: #EB3A45;
  opacity: 1 !important;
}
.fa.read{
  opacity: 0 !important;
}
.messageHomeFrom{
  float:left;
  width:80%;
  font-size: 15px;
  overflow: hidden;
}
.messageHomeContent{
  float:left;
  width:80%;
  font-size: 12px;
  overflow: hidden;
}

.optionOff{
  pointer-events: none;
  opacity: 0.1;
}

.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: black	;
  stroke-width: 0px;
}

.lineUp {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}
.lineSpec {
  fill: none;
  stroke: steelblue;
  stroke-width: 2px;
}

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

.x.axis path {
  stroke-width:0.5px;
}
.y.axis path {
  stroke-width:0.5px;
}

div.tooltip {
  position: absolute;
  text-align: left;
  padding: 10px;
  font: 14px lato;
  color:white;
  background: black;

  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}


div.colorSelect {
  position: absolute;
  text-align: left;
  padding: 10px;
  font: 14px lato;
  color:black;
  background: white;
  z-index: 9999999999999999999999;
  border: 2.5px solid #e6eaf0;
  border-radius:7px;
}

.line {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
}


.specLine--hover {
  stroke: #000;
}

.specLine {
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-width: 2px;

}

.voronoi path {
  fill: none;
  pointer-events: all;
  stroke: #000;
  stroke-opacity: 0;
}

.voronoi circle {
  fill: red;
  display: none;
}

.voronoi :hover circle {
  display: inline;
}

.voronoi :hover path {
  stroke: red;
  stroke-opacity: 0;
}

div.tooltip2 {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px Lato;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

.inviteClass{
  transition: all 0.3s;
  font-weight: normal;
  cursor: pointer;

}
.inviteClass:hover{
  transition: all 0.3s;
  font-weight: bold;
}
.arpBigCreateButton{
  opacity: 1;
  background-color: rgb(36, 45, 99,0.75);
  border: 0px solid rgb(36, 45, 99,1);
  border-radius: 5px;
  transition: all 0.3s;
  color:white;
  cursor: pointer;
  padding: 5px;
  text-align: center;

}
.inactiveAll{
  opacity:0.25 !important;
  pointer-events: none !important
}
.arpBigCreateButton.inactive{
  border: 0px solid rgb(36, 45, 99,45);
  background-color: rgb(36, 45, 99,0.25);
  pointer-events:none;
}
.arpBigCreateButton.inactive{
  background-color: rgb(36, 45, 99,0.25);
  border: 0px solid rgb(36, 45, 99,0.35);
}

.arpBigCreateButton.active{
  border: 0px solid rgb(36, 45, 99,0.85);
  background-color: rgb(36, 45, 99,0.65);
}
.arpBigCreateButton.active:hover{
  background-color: rgb(36, 45, 99,0.95);
  border: 0px solid rgb(36, 45, 99,1);
  pointer-events:all;
}
.arpLegend{
  position: absolute;
  min-width: 30px;
  min-height: 30px;
  max-width: 400px;
  max-height: 100px;
  padding: 5px;
  z-index: 20;
  border-radius: 5px;
  overflow-y: auto;
  font-size: 12px;
  cursor: grab;
}
.fontSizeDropDown{
  position: absolute;
  display: none;
  min-width: 30px;
  min-height: 30px;
  z-index: 21;
}
.arpLegendOption{
  float:left;
  padding: 5px;
  border-radius: 5px;
  margin: 2px;
}

.replyWrapper{
  float:left;
  padding:5px;
  min-height: 25px;
  width:60%;
  margin:5px;
}
.startWrapper{
  float:left;
  padding:5px;
  min-height: 25px;
  width:95%;
  margin-top:5px;

}
.userOptions{
  width: 100%;
  min-height: 25px;
  position: absolute;
  background: white;
  z-index: 9999;
}
.commentWrapper{
  float:left;
  padding:5px;
  min-height: 20px;
  width:100%;
  margin-top:5px;
  border-bottom: 1px solid rgba(255, 0, 0, .25);
}

.thread{
  z-index: 100;
  float:left;
  width: 100%;
  min-height: 25px;
  margin-bottom: 10px;
}

.threadWrapper{

  float:left;
  padding:5px;
  min-height: 25px;
  width:100%;
  margin-top:5px;
}
.threadBlock{
  min-height: 100px;
  width: 100%;
}
.userOptionsWrapper{
  float:left;
  position: relative;
  width: 100%;

}
.arpButton{
  float:right;
  width:auto;
  height:auto;
  margin-top:3px;
  padding: 5px;
  transition: all 0.3s;
  cursor: pointer;
  border-radius: 5px;
  font-size: 8px;
}

.resolveButton{
  float:right;
  width:auto;
  height:auto;
  margin-top:0px;
  margin-right: 15px;
  padding: 2px;
  transition: all 0.3s;
  cursor: pointer;
  border-radius: 5px;
  font-size: 8px;
}
.resolveButton:hover,.arpButton:hover{
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.3s;
  opacity: 1;
}
.panelScreen{
  overflow: hidden;
}
.clicked{
  background-color: var(--arpeggio-navy) !important;
  color:white !important;
  transition: all 0.3s;
  opacity: 1;
}
.clicked2{
  background-color: var(--arpeggio-navy) !important;
  color:white !important;
  transition: all 0.3s;
  opacity: 1;
}
.threadBlockWrapper{
  min-height: 100px;
  width: 250px;
  z-index: 100 !important;
  float:left;
  padding:5px;
}
.threadComment{
}

.progressBarDivWrapper{
  float:left;
  width: 100%;
  height: 50px;
  margin-bottom: 10px;
}

.drop-area {
  border: 2px dashed #ccc;
  border-radius: 20px;
  margin: 20px 20px 20px 0px;
  padding: 20px;
}
.drop-area.highlight {
  border-color: purple;
}
p {
  margin-top: 0;
}
.my-form {
  margin-bottom: 10px;
}
#gallery {
  margin-top: 10px;
}
#gallery img {
  width: 150px;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: middle;
}
label.upload{
  display: inline-block;
  padding: 4px;
  background: #ccc;
  cursor: pointer;
  border-radius: 5px;
  border: 1px solid #ccc;
}
label.upload:hover {
  background: #ddd;
}
table.uploadStatus {
    border-collapse:separate;
    border:solid black 1px;
    border-radius:6px;
    margin-bottom: 10px;
}

table.uploadStatus td, th {
    border-left:solid black 1px;
    border-top:solid black 1px;
}

table.uploadStatus th {
    background-color: #ddd;
    border-top: none;
}

table.uploadStatus td:first-child, th:first-child {
     border-left: none;
}

/* ======================= */

.buttonWrapperForProjectAdd{
  float:left;

  height: 50px;
  font-size: 10px;
}

.currentProject{
  color:white;
  float: left;
  margin-top: 4px;
  margin-bottom: 20px;
  padding-left: 10px;
  font-size: 14px;
  opacity: 1;
}
.currentProject:hover{
  cursor: pointer;
  opacity: 1;
}
.folderImage{
  font-size: 50px;
  transform: translate(15%,15%);
}
.folderImageWrapperProject{
  float:left;
  width: 90%;
  height: 20px;
  margin-top: 2px;
}
.folderImageWrapper{
  float:left;
  width: 100%;
  height: 80%;
  margin-top: 2px;
}
.folderTitle{
  transform: translate(0,0);
  float:left;
  width: 100%;
  height: 20%;
  height: auto;
  margin-top: 2px;
  cursor: text;
  font-size: 12px;
}
.editPencilDiv{
  float:left;
  width: 10%;
  height: auto;
  margin-top: 2px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.permissionProjectDiv{
 position: absolute;
 color:white;
 left:10;
 top:10;
}
.removeProjectDiv{
  float:left;
  width: 10%;
  height: 10px;
  opacity: 0;
  transition: all 0.2s ease-in-out;
}
.folderWrapperFinal{
  float:left;
  position: relative;
}
.folderWrapper{
  float:left;
  position: relative;
  margin: 10px;
  padding:10px;
  background-color: var(--arpeggio-navy);
  color:white;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
  transition: box-shadow 0.2s ease-in-out;
  border-radius: 20px;
  height: 80;
  width: 140;
  cursor: pointer;
}

.folderPlusWrapper{
  border: 1px dashed rgba(255, 0, 0, 0.8);
  background-color: white !important;
  color:black;
}
.folderResetWrapper{
  border: 1px dashed rgba(255, 0, 0, 0.8);
  background-color: white !important;
  color:black;
}
.folderWrapper:hover{
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: box-shadow 0.2s ease-in-out;
  cursor: pointer;
}
.progressBar{
  border: 1px solid rgba(0,0,0,0.3);
  z-index:10;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 10px;
}

.progressBarSub{
  background-color: #242d63 !important;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  border-radius: 10px;
  z-index:100;
  opacity: 1 !important;
}
.arpTr.highlighted{
  color:white;
  background: --arpeggio-blue;
}
.arpTr.highlighted:hover{
  color:white !important;
  background: #2AAADC !important;
}
.inputBox{
  position: absolute;
  padding:10px;
}
.invitationWrapper{
  float:left;
  width: auto;
  height: auto;
  padding: 5px;
  background-color: rgb(36, 45, 99,0.8);
  border-radius: 5px;
  color:white;
  margin-right: 20px;
}
.editButtonShare{
  background-color: rgb(36, 45, 99,0.1);
  border-radius: 5px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  cursor: pointer;
  transition: all 0.3s;
}
.editButtonShare:hover{
  background-color: rgb(36, 45, 99,0.3);
  transition: all 0.3s;
}
.analysisDivWrapper{
  padding:5px;
  background: white;
  z-index: 1;
  position: relative;
  float:left;
  width: 80% !important;
  height: 100% !important;
}

.analysisDivXMark{
  width: 5%;
  float:left;
  height: 80px;
}
.analysisTitle{
  width: 85%;
  font-size: 18px;
}
.analysisSubTitle{
  width: 85%;
  font-size: 13px;
}

.analysisLegend{
  width: 98%;
  font-size: 10px;
  margin-top:5px;
}
.figureTitle{
  padding: 5px;
  float:left;
  cursor: pointer;
  overflow: hidden;
  max-height: 50px;
}


.analysisDiv{
  height: 75%;
  width: 100%;
  margin-top: 30px;
  float:left;
  z-index: 100;
  padding:5px;
}
.selectedWrapper{
  float:left;
  width:100%;
  height: 100%;
  transition: all 0.3s;
  z-index: 3;
}
.graphWrapper{
  float:left;
  width:96%;
  height: 100%;
  transition: all 0.3s;
  z-index: 3;
}
.threadContainer{
  padding: 5px;
  width: 100px;
  height: 100%;
  z-index: 0;
  transition: all 0.3s;
  position: absolute;
  overflow: auto;
  left:65%;
}

.pageNumber{
  font-size: 30px;
  margin-left: 20px;
  color:#20B1A5;
}
.pageNumber:hover{
  color:var(--arpeggio-navy);
  cursor: pointer;
}
.trashIcon{
    text-align: center;
    float:left;
    font-size: 18px;
    padding:5px;
    padding-left:2px;
    padding-right:2px;
    border-radius: 5px;
    transition: 0.2s linear all;
}
.menuOptions{
  font-size: 16px;
  display: inline-block;
}
.menuOptionsFa{
  font-size: 20px;
  display: inline-block;
}
.trashIcon:hover{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  transition: 0.2s linear all;
}
.backIcon, .forwardIcon{
    float:left;
    font-size: 18px;
    padding:5px;
    margin-right: 5px;
    transition: 0.1s linear all;
}
.backIcon:hover{
  cursor: pointer;
  transition: 0.1s linear all;
  transform: rotate(-25deg);
}
.forwardIcon:hover{
  cursor: pointer;
  transition: 0.1s linear all;
  transform: rotate(25deg);
}

.graphButton{
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
  transition: box-shadow 0.2s ease-in-out;
  float:right;
  width: 30px;
  height: 30px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.graphButton.notActive{
  opacity: 0.25;
}
.arpModal{
  background-color: white;
  position: absolute;
  top:10vh;
  height: 80vh;
  left:10vw;
  width: 80vw;
}
.graphButton.Active{
  opacity: 1;
}
.active{
  opacity: 1;
}
.inactive{
  opacity: 0.25;
  pointer-events: none;
}
.inactiveButHover:hover{
  opacity: 0.25;
  pointer-events: none;
}
.inactiveButHover{
  opacity: 0.25;
  pointer-events: all;
}

.graphButton:hover{
  cursor: pointer;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.graphButtonImage{
  max-height: 100%;
  max-width: 100%;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
.sliderInput{
  position: absolute;
  width: 120px;
  height: 30px;
  z-index: 999;
  padding: 8px;
  font-size: 12px;
  border-radius: 5px;
}

.cogDropDownSecondOrder{
  top:0;
  left:0;
}
.cogDropDown{
  width:200px;
  position: absolute;
  height: auto;
  padding:5px;
  top:30px;
  background: white;
  border: 1px solid rgba(255, 0, 0, .25);
  border-width: 0 1px 1px 1px;
  font-size: 12px;
  z-index: 999;
}
.cogDropDownRow{
  float:left;
  width:100%;
  margin-top: 2px;
  padding: 5px;
  border-radius: 5px;
}
.workSpaceUpperDiv{
  float: left;
  height: 30px;
  margin-bottom:20px;
  width: auto;
  overflow: hidden;
  margin-right: 3px;
  margin-top: 7px;
  white-space: nowrap;
}
.workSpaceLogos{
  float: left;
}
.cogDropDownRowWorkSpace{
  cursor: pointer;
  transition: all 0.3s;
  margin: 0;
  margin-bottom: 10px;
}
.cogDropDownRowWorkSpace:hover{
  font-weight: bold;
  transition: all 0.3s;
}


.settingsButton{
  text-align:left;
  float:left;
  height:auto;
  padding: 5px;
  width:auto;
  display: inline;
  margin-right:10px;
  font-size: 14px;
  border-width: 0 2px 2px 2px;
  background-color: white);
  color:black;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.settingsButton:hover{
  cursor: pointer;
  background-color: rgb(36, 45, 99,1);
  color:white;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}

.arpGraphHeader{
  float:left;
  width:100%;
  height:100%;
}
.arpGraphHeaderComponents{
  float:left;
  width:50%;
  height:100%;
  text-align: center;
  background-color: white;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}
.arpGraphHeaderComponents.selected{
  background-color: white;
  border-left: 1px solid #D3D3D3;
  border-top: 1px solid #D3D3D3;
  border-right: 1px solid #D3D3D3;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.arpGraphHeaderComponents.notselected{
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: white;
  border-bottom: 1px solid #D3D3D3;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}

.arpGraphHeaderComponents:hover{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;

}
.questionBackground{
  background-color: var(--arpeggio-navy);
  color:white;
  border-radius: 20px;
  display: inline-block;
  float: left;
  margin-left: 0px;
  width:10px;
  height:10px;
  padding-right: 6px;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: backkground-color 0.3s ease;
  position: relative;
}
.questionBackground:hover{
  background-color: #20B1A5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;

}
.cogDropDownRowClickable{
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  height: auto !important;
}
.cogDropDownRowClickable:hover{
    background-color: var(--arpeggio-navy);
    color:white;
}
.arpLink {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
}

.totalContainer{
  float: left;
  width: 85%;
  margin-top: 5%;
  margin-bottom: 10%;
  margin-left: 5%;
  height: 80%;
}
.visualizeContainer{
  float:left;
  width: 100%;
  height: 100%;
}
.graphContainer{
  float:left;
  width: 96%;
  height: 85%;
  margin: 2%;
}
.arpToolTipRelative{
  opacity: 0;
  pointer-events: none;
  background:  var(--arpeggio-navy);
  color: white;
  width:auto;
  z-index: 999999;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  padding: 10px;
}

.notransition {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.arpToolTip{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background:  var(--arpeggio-navy);
  color: white;
  width:auto;
  z-index: 999999;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  padding: 10px;
  height: auto;
}
.arpToolTipTop{
  opacity: 0;
  pointer-events: none;
  position: absolute;
  background:  var(--arpeggio-navy);
  color: white;
  width:auto;
  z-index: 999999;
  border-radius: 5px;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
  padding: 10px;
  height: auto;
}
.hideToolTip{
  pointer-events: none;
  display: none;
  opacity: 0;
}
.showToolTip{
  pointer-events: all;
  display: block !important;
  opacity: 1 !important;
}
.whiteBackground{
  background: white;
  color:black
}
.firstOrderSideMenu{
  display:block;
  background:white;
  position:absolute;
  left:0;
  top:0;
  width:200;
  padding:10px;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,.1);
  outline: null !important;

}
.secondOrderSideMenu{
  display:none;
  background:white;
  position:absolute;
  left:200;
  top:0;
  width:200;
  padding:10px;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,.1);
  outline: null !important;
}
.sideMenu{
  float:left;
  height: 80%;
  margin-top:5%;
  width: 7%;
}
.sideMenuOption{
  float:left;
  height: 65px;
  width: 65px;
  margin:30%;
  padding: 5px;
  border-radius: 5px;
}
.sideMenuOption.highlighted{
  background-color:#20B1A5;
  color:white;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}
.sideMenuOption:hover{
  background-color:#20B1A5;
  color:white;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

}
line.cutoffLine{

  fill: none;
  stroke: black;
  stroke-width:1px;

}

.menuFloat{
  position:absolute;
  padding:10px;
  background-color:white;
  width:300px;
  height:auto;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,.1);
  outline: null !important;
}
.menuFloatRow{
  float:left;
  width: 90%;
  overflow: hidden;
  height: 30px;
  margin: 2px;
  padding: 5px;
}
.menuFloatRow:hover{
  background-color: grey;
  color:white;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
  cursor: pointer;
  border-radius: 5px;
}
.brush{

}
.brush2{
  fill:#777;
  fill-opacity:0.3;
  stroke:#fff;
  shape-rendering:crispEdges;
}

.hiddenCanvas{
    display: none;
}

canvas {
  position: relative;
}

#theSvg {
  pointer-events: none;
}

li{
  cursor: pointer;
}
.arpBorder{
  border: 1px solid black;
}
.arpOutline{
  outline: 0.75px solid var(--arpeggio-navy) !important;
}
.arp2DLeftPanel{
  float:left;
  width:100%;
  height:93%;
}
.arp2DRightPanel{
  float:left;
  width:35%;
  height:60%;
}
.arp2DRightPanelBottom{
  float:left;
  width:1%;
  height:100%;
}
.cutoffInput{
  float:left;
  width:25%;
  height: 35%;
  margin-top: 5%;
}
.arpCircle{
  r:4;
  fill:var(--arpeggio-navy);
  stroke:white;
}
.xLabelArp{
  font-family: Lato;
}
.yLabelArp{
  font-family: Lato;
}
.dropDownRowSettingsCollector{
  background: white;
  border: 1px solid rgba(255, 0, 0, .25);
  border-width: 0 2px 2px 0;
  z-index: 9999;
}
.dropDownRowSettingsClickable{

}
.dropDownRowSettingsClickable.hover{
  cursor:pointer;
  background:var(--arpeggio-navy);
  color:white;
  border-radius:5px;
  transition: all 0.3s
}
.dropDownRowSettingsClickable:hover{
  cursor:pointer;
  background:var(--arpeggio-navy);
  color:white;
  border-radius:5px;
  transition: all 0.3s
}
.dropDownRowSettings{
  float: left;
  height:auto;
  margin-bottom:5px;
  padding: 5px;
  width:100%;
}
#statsModalSideBar{
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;

}
.sideModal3{
  position: absolute;
  left: 0px;
  width: 0;
  height: 80%;
  margin-left:1%;
  margin-top:5%;
  background-color: white;
  -webkit-box-shadow: 0px 0px 15px -1px #000000;
  box-shadow: 0px 0px 15px -1px #000000;
  outline: none;
}
.show5{
  width: 80%;
}
.selectedFromPCA{
  float:left;
  width: 90%;
  height: 60%;
  overflow-y: auto;
  margin: 5%;
}
.legendDivRow{
  border: 1px black;
  background: black;
  color:white;
  float:left;
  width: auto;
  height: 35px;
  padding-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  overflow-x: hidden;
  margin-left: 4px;
  font-size: 15px;
  border-radius: 5px;
  transition: all 0.3s;
}
.legendDivRow:hover{
  cursor:pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);

  transition: all 0.3s;
}

.arpTopBar{
  float:left  ;
  height: 8%;
  margin-bottom: 3%;
  margin-top: 1%;
  width: 100%;
}
.arpLeftBar{
  float:left  ;
  height: 80%;
  margin-bottom: 3%;
  width: 60px;
  z-index: -100;
  margin-right: 5px;
}
.arpSelectAllWrapper{
  width: 3%;
  float:left;
}
.arpLeftWrapper{
  overflow: scroll;
  height: 70%;
  width: 50px;
  margin-right:0%;
  float:left;
}
.arpHeaderWrapper{
  height: auto;
  width: calc(95% - 150px - 60px);
  overflow: auto;
  float:left;
  position: relative;
  z-index: 100;
}

.arpTableWrapper{
  width: calc(95% - 150px - 60px);
  height: 70%;
  overflow: auto;
  float:left;
  position: relative;
  z-index: 1;
}
.arpFooterWrapper{
  height: 50px;
  width: auto;
  float:left;
}
.selectionPreview{
  height: 50px;
  width: 100px;
  margin-right:5px;
  padding:2px;
  float:left;
}

.arpBottomBar{
  float:left  ;
  margin-top: 2%;
  height: 5%;
  width: 100%;
}



.dropDownPreviewAS{
  position: absolute;
  width: auto;
  height: auto;
  background-color: white;
  display: none;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
  border-radius: 5px;
  z-index: 100;
}
.dropDownPreviewRowAS{
  position: left;
  width: 80%;
  margin-top: 10px;
  height: 100px;
  margin-left: 10%;
  margin-right: 10%;

}
.arpInput{
  float:left;
  padding:3px;
  padding-left: 7px;
  border: 1.25px solid rgb(36, 45, 99,0.25);
  border-radius: 5px;
  transition: all 0.3s;
  outline: none;
  overflow: hidden;
}
.arpInput.selected{
  border: 1.25px solid rgb(36, 45, 99,1);
}
.arpInput:hover{
  border: 1.25px solid rgb(36, 45, 99, 0.65);
  transition: all 0.3s;
}

.arpPreviewRowDropDown{
  float:left;
  width: 100%;
  height: auto;
  font-size: 14px;
  font-family: Lato;
  padding: 10px;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  background-color: white;
}
.countType{
  font-size: 10px;
}

.adminCountWrapper{
  min-width: 8vw;
  padding:5px;
  margin-right:5px;
  text-align: bottom;
  float:left;
}
.adminCountWrapper:hover{
  cursor:pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: linear all .3s;
  cursor: pointer;

}


.arpPreviewRowDropDownHighlight{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.1s;

}

.arpPreviewRowDropDown:hover, .arpPreviewRowDropDown.highlight{
  cursor: pointer;
  background-color: var(--muted-background-2);
  transition: all 0.1s;
}

.previewRowASSmall{
  float:left;
  width: 100%;
  height: 30px;
  font-size: 14px;
  font-family: Lato;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  overflow-wrap: break-word;
  overflow: hidden;
  border-bottom: 1px solid #C8CCD4;
  background-color: white;
}
.previewRowASSmall:hover{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.1s;
}
.previewRowASSmallhighlight{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.1s;
}
.projectStatsTracker{
  float: left;
  width:auto;

  height: 100%;
  margin: 1%;
  margin-left: 5%;
}



.previewRowAS{
  float:left;
  width: 100%;
  height: auto;
  font-size: 14px;
  font-family: Lato;
  padding: 5px;
  padding-left: 7px;
  margin-bottom: 5px;
  overflow-wrap: break-word;
  overflow: hidden;
  border-bottom: 0.5px solid #e6eaf0;
  background-color: white;
  border-radius: 5px;
}
.previewRowASGreyedOut{
  pointer-events: none;
}
.previewRowAS:hover, .previewRowAS.highlight{
  cursor: pointer;
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.1s;
}


.previewRow{
  float:left;
  width: 100%;
  height: auto;
  font-size: 14px;
  font-family: Lato;
  padding: 5px;
  padding-left: 7px;
  margin-bottom: 5px;
  overflow-wrap: break-word;
  overflow: hidden;
  border: 1px solid transparent;
  background-color: white;
  border-radius: 5px;
}

.previewRow:hover{
  border: 1px solid var(--arpeggio-navy);
}

.previewRowFail{
  color:white;
  background-color: var(--arpeggio-danger);
}

.previewRowSuccess{
  color:white;
  background-color: var(--arpeggio-success);
}

.highlightDark{
  cursor: pointer;
  background-color: var(--arpeggio-info) !important;
  color:white;
  transition: all 0.1s;
}


.previewSelectAS.checked::before{
  float:left;
  width: 5%;
  height: 100%;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f00c";
}
.checkedRight::after{
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f00c";
  float:right;
}
.checked::before{
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f00c";
  float:left;
}
.selectAll{

}
.selectAll:hover::before{
  transition: all 0.1s;
  color: var(--arpeggio-navy);
  cursor: pointer;
}

.selectAll::before{
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f058";

  font-size: 20px;

  transition: all 0.1s;
}
.expanded_icon::before{
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f0d7";
}

.previewAS{
  float:left;
  width: 95%;
  height: 100%;
}
.filterRowAS{
  float: left;
  width: 100%;
  height: 100px;
}

.rightSideAS{
  float:left;
  width:50%;
  height:80%;
  overflow-y: auto;
}

.selectAllButtonWrappersAS{

  float:left;
  width:100%;
  height: 50px;
}
.projectFooter{
  float:left;
  width: 100%;
  height: 10%;
}


.selectButtonAS{
  float:left;
  width: auto;
  margin-top: 5px;
  margin-right: 2%;
  margin-bottom: 5px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
  padding: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
  background-color: white;
  color:black;
  transition: 0.2s all;
}
.selectButtonAS2{
  float:left;
  width: auto;
  margin-top: 5px;
  margin-right: 2%;
  margin-bottom: 5px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
  padding: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
  background-color: white;
  color:black;
  transition: 0.2s all;
}
.modal-backdrop
{
    opacity:0.1 !important;
}

.selectButtonASCp{
  float:left;
  width: auto;
  margin-top: 5px;
  margin-right: 2%;
  margin-bottom: 5px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
  padding: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.15), 1px 1px 3px rgba(0,0,0,.15);
  cursor: pointer;
  background-color: white;
  color:black;
  transition: 0.2s all;
}


.selectButtonASInv{
  float:left;
  width: auto;
  margin-top: 5px;
  margin-right: 2%;
  margin-bottom: 5px;
  height: auto;
  text-align: center;
  border-radius: 5px;
  font-size: 10px;
  white-space: nowrap;
  padding: 5px;
  box-shadow: 0 0 2px white, 1px 1px 3px white;
  cursor: pointer;
  background-color: rgba(0,0,0,.15);
  color:white;
  transition: 0.2s all;
}

.selectButtonASInv:hover{
  background-color: white;
  color:rgba(0,0,0,1);
  transition: 0.2s all;
}


.selectButtonAS:hover{
  background-color: rgb(36,45,99, 0.9);
  color:white;
  transition: 0.2s all;
}
.selectButtonAS2:hover{
  background-color: rgb(36,45,99, 0.9);
  color:white;
  transition: 0.2s all;
}

.selectButtonASCp:hover{
  background-color: rgb(36,45,99, 0.9);
  color:white;
  transition: 0.2s all;
}

.indexGoBack{
  float:left;
  cursor: pointer;
  transition: 0.2s all;
  padding:3px;
  border-radius:3px;
}
.indexGoBack:hover{
  background: var(--muted-background);
  transition: 0.2s all;
  cursor: pointer;
}
.bottomOptions{
  color: black;
  cursor: pointer;
  font-size: 25px;
  margin-right: 5px;
}
.bottomOptions:hover{
  color: var(--arpeggio-navy);
  transition: 0.3s all;
}
.previewWrapperAS{
  float:left;
  width:100%;
  height:60%;
  overflow-y: auto;
  position: relative;
}


.statsWrapperAS{
  float:left;
  width:50%;
  height:50px;
  margin-left: 50%;
  margin-top:10px;
}
.leftSideAS{
  float:left;
  width:50%;
  height:80%;
}
.filterWrapperAS{
  float:left;
  width:100%;
  height:80%;
}

.addAnotherAS{
  float:left;
  width:80%;
  margin-left:20%;
  height: 20%;
  margin-top:5%;
  cursor: pointer;
}
.categoriesAS{
  width: 100%;
}
.removeFilterAS{
  float:left;
  width:1%;
  margin-top: 2 %;
  margin-right:2%;
  font-size: 20px;
  height: 100%;
}
.removeFilterAS:hover{
  cursor: pointer;

}
.searchLabel{
  width: 100%;
  height: 20%;
  font-size: 14px;
  color:var(--arpeggio-navy);
}
.arpCategoryDropDown{
  background: white;
  transition: box-shadow 0.2s ease-in-out;
  position: absolute;
  z-index: 999999;
  border: 1.25px solid rgb(36, 45, 99,0.25);
  border-radius:5px;
  height:auto;
  left:50;
}

.categoryDropDownAS{
  float:left;
  width:17.5px;
  margin-top: 1.5%;
  margin-right:2%;
  height: 100%;
}
.searchBarAS{
  float:left;
  width: 70%;
  height: 20%;
  position: relative;
}


.arpSearchBarFilterPartition{
    width:100%;
    height: 100px;
    margin-top:5px;
}
.arpSearchBarFilterOptions{

}
.arpSearchBarIcon{
  width:auto;
  float:left;
  margin-right:10px;
  height:100%
}
.arpSearchBarWrapper{
  float:left;
  width: 50%;
  height: 100%;

}
.arpASWrapper{
  float:left;
  width: 100%;
  height: auto;
  margin-top: 5px;
}
.arpASWrapper2{
  float:left;
  width: auto;
  height: auto;
  font-size: 8px;

}

.arpSearchBarWrapperFinal{
  position:relative;
  width: 100%;
  background-color: white;
  z-index: 999;
  font-size: 14px;
  border: 1.25px solid rgb(36, 45, 99,0.25);
  border-radius: 15px;
  box-shadow: 0 0px 0px rgba(0,0,0,0.0);
  height: 35;
}

.saveKeyword{
  float:left;
  border-radius: 5px;
  background-color: var(--arpeggio-navy);
  color:white;
  opacity: 1;
  font-size: 14;
  cursor: pointer;
  margin-left:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-top:4px;
}
.saveKeywordAgain{
  float:left;
  border-radius: 5px;
  background-color: var(--arpeggio-navy);
  color:white;
  opacity: 0.8;
  cursor: pointer;
  margin-left:5px;
  padding-left:5px;
  padding-right:5px;
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top:6px;
}
.savedKeywords{
  width:auto;
  font-size:14;
  position:inline-block;
}
.saveKeyword:hover{
  opacity:0.7;
}


input.arpSearchBar, input.arpSearchBarAS{
  border:none;
  float: inline-block;
  height:100%;
  width: 100%;
  font-size:13;
  -webkit-user-select:text;
}
input.arpDropDownInput{
  width:90%;
  margin-left:10%;
  margin-right: 10%;
  margin-top: 3%;
  margin-bottom: 5%;
  background-color: #f2f2f2;
}
.workSpaceSelection{
  float: left;
  width: 80%;
  margin-left: 3%;
  margin-right: 10%;
  height: 40px;
  padding:5px;
  cursor: pointer;
}

.selectedExpandIconWorkSpace{
  display: inline-block;
  margin-right: 10px;
  text-align:center;
  line-height: 1.5;
}
.selectedExpandIcon{
  float:left;
  width: 10%;
  display: inline;
}
.selectedExpandTitle{
  float:left;
  width: 90%;
  display: inline;
}
.selectedExpandWorkSpace{
  float:left;
  width:150px;
  font-size: 14px;
  margin-left:10px;
  opacity:1;
  cursor: pointer;
}
.propertyName{
  padding:3px;
  float:left;
  height:25%;
  margin-bottom: 5px;
  width:70%
}

.selectedExpand{
  float:left;
  width:200px;
  height: 50px;
  font-size: 14px;
  margin-right:5px;
  padding:5px;
  opacity:1;
  color:black;
  font-weight: normal;
  transition: all 0.3s;
}
.selectedExpandActive{
  cursor: pointer;
  pointer-events: all;
}
.selectedExpandInActive{
  cursor:not-allowed;
  opacity: 0.25;
}
.selectedExpandActive:hover{
  color:var(--arpeggio-navy);
  transition: all 0.3s;
  font-weight: bold;
}
.selectedExpandInactive:hover{
}

.editButton{
  cursor:pointer;
  float:right;
  width:10%;
  font-size:14px;
  position:relative;
}

.commentArea{
  overflow-y:hidden;
  width:100%;
  margin-bottom: 2px;
  cursor: text;
  font-size: 10px;
  margin-top:2px;
  float:left;

}

.btn-info2{
  margin-top:1%;
  margin-left:1%;
}

.btn-info-5{
  cursor:pointer;
  font-size:12px;
  border-radius: 5px;
  padding: 5px;
  margin:3px;
  float:left;
  background-color: #223254;
  color:white;
}

.groupArea{
  overflow-y:auto;
  height:97%;
  width:95%;
  float:left;
  border-style: solid;
  border-color: #d4d4d4;
  border-width: 1px;
  margin-bottom: 5%
  padding:5px;
}

.groupAreaComments{
  min-height:25px;
  height: auto;
  overflow-y:visible;
  border: 1px solid rgba(255, 0, 0, .25);
  border-width: 1px;
  padding:5px;
  border-radius: 5px;
}

.arpDropDownColumn{
  -webkit-appearance: none;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border: 0;
  font-family: inherit;
  padding: 12px 0;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-bottom: 2px solid #C8CCD4;
  background: none;
  border-radius: 0;
  color: #223254;
  outline:none;
  transition: all .15s ease;
}
.arpDropDownColumn:focus{
  width:85%;
  margin-right: 5%;
  border-bottom: 3px solid var(--arpeggio-navy);
}
.loadingExplain{
  float:left;
  width:100%;
  height: 50%;
  overflow: hidden;
}

.columnDropDown{
  position: absolute !important;
  left:0;
  top:40px;
  width: 200px  !important;
  height: 200px  !important;
  display: none;
  color:black !important;
  font-weight: normal;
  background-color: white !important;
  transition: height 0.25s ease-in  !important;
  border-radius: 3%  !important;
  box-shadow: 1px 1px 5px 5px rgba(0,0,0,.1)  !important;

}

hr.new1 {
  border-top: 1px solid grey;
}
.sidebarButton{
  float:left;
  width:50px;
  height:50px;
  font-size:25px;
  margin-right:15px;
  margin-bottom:5px;
  cursor: pointer;
}
.sidebarButton i{
  margin-bottom: 2px;
}
.dropDownSheet{
  position:  absolute;
  width: auto;
  max-height: 200px;
  z-index: 1;
  background-color: white;
  overflow-y: scroll;
  border: 1px solid #ddd;

}

.arpDDbutton:hover{
  background-color: #D3D3D3;
  transition: all 0.3s;

  -webkit-touch-callout: all 0.3s ease-in-out; /* iOS Safari */
  -webkit-user-select: all 0.3s ease-in-out; /* Safari */
  -khtml-user-select: all 0.3s ease-in-out; /* Konqueror HTML */
    -moz-user-select: all 0.3s ease-in-out; /* Old versions of Firefox */
     -ms-user-select: all 0.3s ease-in-out; /* Internet Explorer/Edge */
         user-select: all 0.3s ease-in-out; /* Non-prefixed version, currently*/
  cursor: pointer;

}
.arpDDbutton{
  position: relative;
  width: 100%;
  height: auto !important;
  padding: 5px;
  border-radius: 3px;
  text-align: left;
  font-size: 14px;
  background-color: rgb(221, 221, 221,0.3);

  color:black;
  transition: all 0.3s;
  -webkit-touch-callout: all 0.3s ease-in-out; ; /* iOS Safari */
  -webkit-user-select: all 0.3s ease-in-out;; /* Safari */
  -khtml-user-select: all 0.3s ease-in-out;; /* Konqueror HTML */
    -moz-user-select: all 0.3s ease-in-out;; /* Old versions of Firefox */
     -ms-user-select: all 0.3s ease-in-out;; /* Internet Explorer/Edge */
         user-select: all 0.3s ease-in-out;; /* Non-prefixed version, currently */


}
.arpDDRow{
  width: auto;
  height: auto;
  padding: 5px;
}
.arpDDRow:hover{
  cursor: pointer;
  background: #D3D3D3;

}
.arpDropDownRow{
  width:100%;
  padding-top:5px;
  height:30px;
  padding-left: 4px;
  border-radius: 5px;
  margin-top:5px;
  cursor: pointer;
}
.projectOption, .projectSelectOption{
  float:left;
  width:100%;
  padding: 5px;
  transition: linear 0.3s all;
  cursor: pointer !important;
}
.projectOption:hover, .projectSelectOption:hover{
  padding: 5px;
  transition: linear 0.3s all;
  background-color: rgba(255,255,255,0.3) !important;
}

.arpDropDownRow:hover{
  background-color: #D3D3D3;
}

.arpDropDownRowAddProperty{
  background-color: white;
  cursor: pointer;
}
.arpDropDownRowAddRow{
  background-color: white;
  cursor: pointer;
}

.pagingWrapper{
  float:right;
  width: auto;
  height: 100%;
}

.prevNext{
  float:left;
  font-size:12px;
  transition: all 0.3s;
  height:35px;
  margin-top: 10px;
  width:50px;
  margin-right: 10px;
  margin-left: 10px;
  display: inline-block;

}
.pageButtonText{
  height:auto;
  width:100%;
  float:left;
  font-size: 12px;
}
.pageButton{
  float: left;
  height: 80px;
  width: 30px;
  font-size:12px;
  margin-top:5px;
  display: inline-block;
  text-align: center;
  margin-left:10px;
  transition: all 0.3s;
}
.pageButtonElipse{
  position: absolute;
  height: 35px;
  width: 30px;
  font-size:12px;
  margin-top:5px;
  display: inline-block;
  text-align: center;
  margin-left:10px;
  transition: all 0.3s;
}
.arpSearchBarDiv{
  float:left;
  width: 100%;
  height: 70%;
}
.arpSearchBarWrapperInner{
  position:relative;
  width: 100%;
  background-color: white;
  z-index: 999;
  font-size: 14px;

}
.arpASWrapper3{
  float:left;
  width: 30%;
  margin-left: 10%;
  height: 100%;
  font-size: 10px;
  color:red;
}

.arpASWrapper2:hover, .arpASWrapper3:hover{
  color:var(--arpeggio-navy);
  font-weight: bold;
  cursor: pointer;
}
.arpTr{
}
.text{
  fill:"black";
}
.arpTr:hover{

  background-color: white !important;
  color:black !important;
}
.node {
  fill: grey;
  opacity: 0.5;
}

.arpPinnedLabelGroupText{
  color:black;
  stroke-opacity:0.25;
  stroke-width:2px;

}
.arpPinnedLabelGroupLine{
  stroke: black;
  stroke-opacity:0.25;
  stroke-width:2px;
}

.pageButton:hover,.pageButton.highlight{
  color:white;
  border-radius: 5px;
  background-color: var(--arpeggio-navy);
  cursor: pointer;
  transition: all 0.3s;
}
.selectedOption{
  float:left;
  font-size: 8px;
  padding: 2px;
  padding-left: 5px;
  padding-right: 5px;
  margin: 2px;
  background-color: var(--arpeggio-navy);
  color:white;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
  transition: all 0.3s;
  border-radius: 5px;

}
.selectedOption:hover{
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  cursor: pointer;
}

.arpCellTextHeaderInner{
  float:left;
  width:80%;
  height:100%;
  text-align: center;
  pointer-events: none;
}
.arpCellTextHeaderInnerRow{
  float:left;
  width:80%;
  height:100%;
  text-align: left;
  z-index: -3;
  pointer-events: none;
}
.arrowLeft::before{
  float:left;
  width: 20%;
  pointer-events: none;
  height:100%;
  content: "\f060";
  font-family: FontAwesome;
}
.arrowRight::before{
  float:left;
  width: 20%;
  pointer-events: none;
  height:100%;
  content: "\f061";
  font-family: FontAwesome;
  background: none;
}

.arrowUp::before{
  float:left;
  width: 20%;
  height:100%;
  pointer-events: none;
  content: "\f062";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  background: none;
}
.arrowDown::before{
  float:left;
  background: none;
  width: 20%;
  pointer-events: none;
  height:100%;
  content: "\f063";
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
}
.arpCellTextHeaderInner.arrowDown::after{
  float:left;
  width:80%;
  height:100%;
  text-align: center;
}

.arpCellTextHeaderArrow{
  position: relative;
  top: 50%;
  float: left;
  transform: translateY(-30%);
  width:10%;
  height:80%;
  font-size:14px;
}


.arpDropDown{
  height:300px;
  width:300px;
  margin-right: 5px;
  background-color: white;
  z-index: 999;
  position: absolute;
  display: none;
}


.bottomBarLeft{
  float:left  ;
  margin-right: 10px;
  min-width: 10px;
}


.arpHeader{
  width: auto;
  height: 100%;
}
.arpLeft{
  float:left;
  width:25%;
  z-index: -100;
}

.headerButtons{
  font-size: 14px;
  margin-right: 10px;
}
.headerButtonForProjectCounter{
  float:left;
  margin-left:5px;
  font-weight: bold;
}


.arpTable{
  height: 100%;
  position: relative;
}

.arpHeaderWrapper::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.arpCell::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}


.experimentTableWrapper::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

.experimentTableHeader::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}
.experimentTableLeft::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}


.arpEditableCellTemplate{
  padding:5px;
  background: white;
  -webkit-box-shadow: 0px 5px 9px 1px rgba(0,0,0,0.39);
  -moz-box-shadow: 0px 5px 9px 1px rgba(0,0,0,0.39);
  box-shadow: 0px 5px 9px 1px rgba(0,0,0,0.39);
  z-index: 9999999999999999999999;
  outline: 0px solid transparent;
}
.arpLeftWrapper::-webkit-scrollbar {
    display: none;  /* Safari and Chrome */
}

.arpRow{
  width: 100%;
}
.arpRowSelection{
  padding:2px;
  cursor:pointer;
  border-radius: 5px;
}
.arpRowSelection:hover{
  background-color: grey;
  transition: all 0.3s;
}

.rowBreak{
  float:left;
  height:0px;
  width:100%;

}
[contenteditable] {
    -webkit-user-select: text;
    user-select: text;
}
.arpCellNoEdit{
  opacity: 0.75;
}
.arpCellTopExp{
  cursor: pointer;
}
.arpCellTopExp:hover{
  background: var(--muted-background);
  transition: 0.2s all;
  cursor: pointer;
}
.specParameter{
  cursor: pointer;
  background: white;

}
.specParameter:hover{
  background: var(--muted-background);
  transition: 0.2s all;
  cursor: pointer;
}
.specParameterClicked{
  background: var(--arpeggio-navy) !important;
  color: white;
  transition: 0.2s all;
  cursor: pointer;
}
.arpCell{
  z-index: 1;
  position: relative;
  height: auto;
  width: auto;
  float:left;
  padding: 5px;
  overflow-wrap: break-word;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s;
  z-index: 1;
}
.arpCellFirst{
  border-bottom: 0.1px solid rgba(255, 0, 0, .15);;
}
.arpCellLast{
  border-bottom: 0.1px solid rgba(255, 0, 0, .15);;
  border-left: 0.1px solid rgba(255, 0, 0, 0.15);
}

.arpCellInner{
  cursor: pointer;
  border-left: 0.1px solid rgba(255, 0, 0, 0.15);
  border-bottom: 0.1px solid rgba(255, 0, 0, 0.15);
  font-weight: thin;
}
.arpCellInner:hover{
  background: var(--muted-background);
  transition: 0.2s all;
  cursor: pointer;
  z-index: 9999;
}
.arpCellInnerWhite{
  border-right: 0.1px solid rgba(255, 255, 255);
  border-bottom: 0.1px solid rgba(255, 255, 255);
  font-weight: thin;
}



.arpCellModal{
  position: relative;
  height: auto;
  width: auto;
  float:left;
  padding: 5px;
  transition: font-size 0.3s;
  overflow-wrap: break-word;
  overflow: hidden;
}

.highlight{
  background-color: var(--muted-background-2) !important;
}
.highlight2{
  background-color: var(--muted-background) ;
}

.highlight4{
  transition: background 0.2s;
  background-color: #51c4d3!important;
}
.highlight5{
  transition: background 0.2s;
  background-color: var(--muted-background);
 ;
}

.arpCellHeaderLeft{
  font-weight: bold;
}

.blueBorder{
  background-color: rgb(42, 170, 220, 0.2);
  /* border-top:0.45px solid rgb(42, 170, 220)!important; */
}
.currentlyWrapper{
  float:left;
  height:auto;
  width:100%;
}


.arpCellHighlightedBorderLeftRight{
  background-color: rgba(36,45,99,0.5) !important;
  color: white !important;
}




.arpCellTextHeader{
  z-index: 9999999999999999999999 !important;
  overflow-wrap: break-word;
  overflow: visible !important;
  font-family: Lato;
  font-weight: bold;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
}
.arpCellText{
  overflow-wrap: break-word;
  float:left;
  overflow-y: scroll;
  font-family: lato;
  padding: 5px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
}



.table {
    display: table;
}
.row {
    display: table-row;
}
.cell {
    display: table-cell;
}
.modal-header{

}
.modal-content{

}
.modal-body {
  overflow-x: auto;
}
.modal-body-arp{
  left:0px;
  transition: margin-right 0.3s ease;
}
.modal-title-arp{
  left:0;
  top:0;
  position: absolute;
  transition: left 0.3s ease;
  margin: 10px;
}


.switch3 {
   position : relative ;
   display : inline-block;
   width : 32px;
   height : 15px;
   background-color: #eee;
   border-radius: 15px;
   transition: all 0.3s;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
 }
 .switch3:hover{
   cursor: pointer;
 }
 #genomeSelectorModal{
  transition: all 0.3s ease;
 }
 .switch3::after {
  content: '';
  position: absolute;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: white;
  left:2px;
  top: 1px; // TO GIVE AN EFFECT OF CIRCLE INSIDE SWITCH.
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox3:checked + .switch3::after {
  transform: translate(16px, 0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox3:checked + .switch3 {
  background-color: var(--arpeggio-navy);
  transition: all 0.3s;
}
.checkbox3 {
   display : none;
}





.switch4 {
   position : relative ;
   display : inline-block;
   width : 25px;
   height : 10px;
   background-color: #eee;
   border-radius: 10px;
   transition: all 0.3s;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
 }
 .switch4:hover{
   cursor: pointer;
 }
 .switch4::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 8px;
  border-radius: 50%;
  background-color: white;
  left:1px;
  top: 1px; // TO GIVE AN EFFECT OF CIRCLE INSIDE SWITCH.
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox4:checked + .switch4::after {
  transform: translate(16px, 0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox4:checked + .switch4 {
  background-color: var(--arpeggio-navy);
  transition: all 0.3s;
}
.checkbox4 {
   display : none;
}














.switch2 {
   position : relative ;
   display : inline-block;
   width : 40px;
   height : 20px;
   background-color: #eee;
   border-radius: 20px;
   transition: all 0.3s;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Old versions of Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome, Opera and Firefox */
 }
 .switch2:hover{
   cursor: pointer;
 }
 .switch2::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: white;
  left:2px;
  top: 1px; // TO GIVE AN EFFECT OF CIRCLE INSIDE SWITCH.
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox2:checked + .switch2::after {
  transform: translate(18px, 0);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.checkbox2:checked + .switch2 {
  background-color: var(--arpeggio-navy);
  transition: all 0.3s;
}
.checkbox2 {
   display : none;
}
.unselect{
  font-size: 14px;
  -webkit-transition: all 200ms linear;
  -ms-transition: all 200ms linear;
  transition: all 200ms linear;

}
.highlightedIndexRow{
  color:white;
  background-color: var(--arpeggio-navy);
}

.indexRow{
  font-size: 13px;
  float:left;
  width:100%;
  padding:8px;
  transition: 0.2s all linear;
  border-bottom: 1px solid rgb(247, 202, 201,0.5);
  z-index: 1;
}

.indexSquare{
  transition: 0s all linear !important;
  font-size: 13px  !important;
  float:left  !important;
  width:150px !important;
  height:150px  !important;
  padding:8px  !important;
  border-bottom: 0px solid rgb(247, 202, 201,0.5)   !important;
  border-radius:20px;
  margin: 5px;
  outline: 1.5px solid #D3D3D3;

}

.indexSquare:hover{
  outline: 2.75px solid steelblue !important;
  background: white !important;
  cursor: pointer;
}

.indexSquare.clicked{
  background-color: white !important;
  outline: 2.75px solid steelblue !important;
  color:black !important;
  transition: all 0.3s;
  opacity: 1;
}

.indexRow.clicked{
  background-color: var(--arpeggio-navy);
  color:white;
  transition: all 0.3s;
  opacity: 1;
}

.indexRow:hover{
  background-color: var(--muted-background);
  cursor: pointer;
  z-index: 99999  !important;
}

.indexRowSpecial:hover{
  background: var(--arpeggio-success);
  transition: 0.2s all;
  cursor: pointer;
}
.workSpaceOperations{
  float:left;
  width:auto;
  height:100%;
  margin-right:30px;
  cursor:pointer;
  opacity: 0.25;
  pointer-events: none;
}
.workSpaceOperations.active{
  opacity: 1;
  pointer-events: all;
}

.titleLabel{
  font-size: 1.5vh;
  font-family: lato;
}
.titleCount{
  font-size: 4vh;
  font-family: lato;
}
.panelBody{
  overflow: auto;
  height:80%;
}

.panelTop{
  height:12vh;
  width:12vh;
  margin-bottom: 1vh;
  padding:10px;
  float:left;
  margin-right:1vw;
}
.panelTop:hover{
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  transition: linear all .3s;
  cursor: pointer;
}
.unselect:hover{
  font-size: 16px;
  cursor: pointer;
}
div.fadeMe {
  width:      inherit;
  height:     100%;
  top:        0;
  left:       inherit;
  position:   fixed;
  pointer-events: none;
  z-index: 99;
  background-color: rgb(211,211,211, 0.5);
}
.loadingCenter{
  z-index: 999999;
  width: 300px;
  height: 300px;
  position: absolute;
  transform: translate(-50%, -10%);
}
img.loadingCenter2 {
  max-height: 30px;
  max-width: 30px;
  z-index: 999999;
}

.line {
  fill: none;
  stroke: var(--arpeggio-navy);
  stroke-width:1px;
}
.regressionLine{
  fill: none;
  stroke: var(--arpeggio-navy);
  stroke-opacity:0.5;
  stroke-width:4px;
}
.close{
  outline: none;
   outline-width: 0;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */

}

.noselect {
  outline: none;
   outline-width: 0;
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

.circleLogoSmaller
{
  margin-right: 3px;
  width:20px;
  height:20px;
  border-radius:10px;
  font-size:10px;
  color:white;
  line-height:17.5px;
  text-align:center;
  background: var(--arpeggio-navy);
  opacity: 0.5;
  margin-top:1px;
  font-weight: bold;
}
.finalFigureWrapper{
  -webkit-transition: all 0.2s ease-out;
 -moz-transition: all 0.2s ease-out;
 -o-transition: all 0.2s ease-out;
 transition: all 0.2s ease-out;
}
.circleLogoSmaller:hover{
  opacity: 1;
}
.circleLogoTiny
{
  width:14px;
  height:14px;
  border-radius:10px;
  font-size:9px;
  padding-top: 1.5px;
  padding-left: 0.5px;
  color:white;
  line-height:10px;
  text-align:center;
  background: var(--arpeggio-danger);
  opacity: 1 !important;
  margin-top:10px;
  z-index:10 !important;
  position: absolute;
}

#helpIcon{
  color:  var(--arpeggio-navy);
  cursor: pointer;
  font-size: 35px;
}

.circleLogo
{
  z-index:1 !important;
  width:30px;
  height:30px;
  border-radius:20px;
  font-size:16px;
  color:white;
  line-height:30px;
  text-align:center;
  background: var(--arpeggio-navy);
  opacity: 0.5;
  margin-top:10px;
  -webkit-transition: 0.3s; /* For Safari 3.1 to 6.0 */
  font-weight: bold;
}
.circleLogo3{
  background: #EB3A45;
  color:white;
}
.circleLogo4{
  background: #F7882F;
  color:white;
}
.circleLogo2{
  background: var(--arpeggio-info);
  color:white;
}
.circleLogo:hover
{
  opacity: 1;
  cursor:pointer;
  -webkit-transition: 0.3s; /* For Safari 3.1 to 6.0 */
}

.navigationIndicator{
  float:left;
  width: 70%;
  height: 5vh;
  padding-left: 12px;
  padding-top: 10px;
  position: relative;
}
.defaultNav{
  float:left;
  width: 30%;
  height: 100%;
  padding-right: 12px;
  padding-top: 2px;
  position: relative;
}
.topBar{
  float:left;
  width: calc(100vw - 220px);
  margin-left:220px;
  height:60px;
  position: fixed;
  z-index: 100;
  background: white;
}

.topBarExp{
  height:50px;
  background: white;
  z-index: 99;
}
.piePanelNoBorder{
  display:inline-block;
  background: white;
  float:left;
  width:225px;
  height:110px;
  padding: 10px;
  border-radius:5px;

}
.piePanel{
  background: #ffffff;
  float:left;
  width:225px;
  height:110px;
  padding: 10px;
  margin-bottom:5px;
  border: 1.75px solid #e6eaf0;
  border-radius:5px;
}
.piePanelDark{
  background: white;
  float:left;
  width:225px;
  height:110px;
  padding: 10px;
  margin-bottom:5px;
  border: 2px solid #e6eaf0;
  border-radius:5px;
}
.figureBox{
  padding: 10px;
  outline: 1.75px solid transparent;
  border-radius:2px;
}
.figureBoxClicked{
  padding: 10px;
  outline: 1.75px solid grey;
  border-radius:2px;
}
.hasFocus{
  padding: 10px;
  outline: 2.75px solid steelblue !important;
  border-radius:2px;
}

.figureBoxSmall{
}
.textBoxStyle{
  float:left;
  margin-right:15px;
  text-align: center;
  vertical-align: bottom;
  line-height: 10px;
  display:inline-block;
  cursor: pointer;
}
.dot {
  position: absolute;
  height: 10px;
  width: 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
}

.piePanelAndHover{
  background: #ffffff;
  float:left;
  width:225px;
  height:110px;
  padding: 10px;
  margin-bottom:5px;
  border: 1.75px solid #e6eaf0;
  border-radius:5px;

  transition: all 0.3s;
  cursor: pointer;
}
.piePanelAndHover.clickedOutline{
  border:  1.75px solid var(--arpeggio-navy) !important;
}
.piePanelAndHover:hover{
  transition: all 0.3s;
  background-color: var(--muted-background);
}
.projectName{
  float:left;
  display:inline;
  cursor: pointer;
  margin-left: 10px;
  font-size:20px
}
.underline{
  border-bottom: 1px solid white;
  width:0%;
  float: inherit;
   -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  display:block;
}
.projectName:hover .underline {
    width: 100%;
}
.userName:hover .underline {
    width: 100%;
}
.wrapperTable{
  display:inline-block;
  float:left;
  width:100%;
  height:100%;
  padding:10px;
  border: 0.5px solid #e6eaf0;
  border-radius:5px;
  background: white;
}
.popularTools{
  float:left;
  margin-top:10px;
  margin-left:15px;
  width:235px;
  height:100%;
  padding:10px;
  border: 0.5px solid #e6eaf0;
  border-radius:5px;
  background: white;
  overflow: hidden;
}
.popularToolExample{
  display: inline-block;
  white-space: nowrap;

  float:left;
  width: 100%;
  height: auto;
  padding: 5px;
  margin-top:10px;
  border-radius: 5px;
}
.popularToolExample:hover{
  color:black;
  background: rgb(247, 202, 201,0.5);
  transition: 0.3s all;
  cursor: pointer;

}
.theContent{
  padding-left:10px;
  padding-top:10px;
  left:220px;
  height: calc(100vh - 60px);
  width: calc(100vw - 220px);
  top: 60px;
  position: absolute;
  z-index: 1;
  overflow: auto;
}
.progressWrapper{
  position: absolute;
  width:150;
  height: 200;
  top:50px;
  left:720px;
  z-index: 999;
}
.subProgress{
  padding:10px;
}

.logo{
  float:left;
  height: 10vh !important;
  z-index: 2;
  position: fixed;
  overflow: auto;
  width: 220px;
  margin-top:90vh;
  padding-left:10px;
}
.logo img{
  width:180px;
  text-align: center;
}


.sidebarArpeggio {
  height: 90vh !important;
  z-index: 2;
  position: fixed;
}
.sidebarArpeggio.expanded{
  width: 220px;
}
.sidebarArpeggio.collapsed{
  width: 50;
}

.collapseArrow{
  position: absolute;
  height: 1.1vh;
  width: 0.1vw;
  top:0;
  left:0;
  color:white;
  transform: translate(170px,10px);
  z-index: 99;
}
.expandArrow{
  position: absolute;
  height: 1.1vh;
  width: 0.1vw;
  top:0;
  left:0;
  color:black;
  transform: translate(0.3vw,-20.8vh);
  z-index: 99999;
}


.collapseArrow i{
  font-size:2vw;
  cursor: pointer;
  vertical-align:middle;
  position: absolute;
  margin-top: 24.2vh;
}

.expandArrow i{
  font-size: 2vw;
  cursor: pointer;
  vertical-align:middle;
  position: absolute;
  margin-top: 24.2vh;
}

.logoWrapper{
  margin-top:6px;
  font-size: 9px;
}

.userName{
  cursor: pointer;
  color:white;
  font-size: 20px;
  margin-top:10px;
  margin-bottom:10px;
  height: 40px;
  width:auto;
  padding-left:23px;
  float:left;
  opacity: 1;
}
.changeProject{
  float:left;
  margin-top:20px;
  width:100%;
  color:white;
  opacity: 1.0;
  font-size: 17px;
  transition: 0.3s all;
}
.changeProject:hover, .changeProject:before{
  transition: 0.3s all;
  opacity: 1;
  transition: 0.3s all;
}

.headerWrapperRow{
  float:left;
  width:100%;
  padding:4px;
  padding-left:10px;
  border-radius: 5px;
}

.navList .row{
  position: relative;
  width: 195;
  height: auto;
  float:left;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 20px;
  transition: opacity .25s ease-in-out;
  border-radius: 0.5vw;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 12px;
  font-family: lato;
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 25px; /* vertically size by height, line-height or padding */
  color:white;
  overflow: hidden;
  padding-bottom: 10px;
}
.navList{
  height: 80%;
  width: 100%;
  overflow-y: auto;
}
.navList::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}
.navList .subRow{
  float:left;
  width:calc(100% - 1.5px);
  display: none;
}

.navList .inner:hover, .subRowEntry:hover, .headerWrapperRow:hover{
  background-color: rgba(255,255,255,.25);
  -webkit-transition: background-color 300ms linear;
  -ms-transition: background-color 300ms linear;
  transition: background-color 300ms linear;
  cursor: pointer;
}

.rowCarrot{
  float:left;
  width: 10%;
  padding-top: 6px;
  font-size: 8px;
}

.rowIcon{
  width: 30px;
  font-size: 14px;
  padding-left: 3;
}
.subRowIcon{
  width: 20px;
  font-size: 14px;
  display: inline-block;
  text-align: center;
  margin-right: 10;
}

.rowDescription{
  float:left;
  width: 80%;
  display: inline-block;
  margin-left: 5px;
  font-size: 14px;
  word-wrap: break-word;
}

.subRowEntry{
  float:left;
  width: 100%;
  height: auto;
  float:left;
  padding: 4px;
  padding-left: 16.25;
  transition: opacity .25s ease-in-out;
  border-radius: 5px;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 12px;
  font-family: lato;
  color:white;
  margin-top:1px;
}


.navList .inner{
  float:left;
  width: 100%;
  text-align: left;
  color:white;
}



.vertical-center {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

  transform: rotate(-90deg);
  transform-origin: right, top;
  -ms-transform: rotate(-90deg);
  -ms-transform-origin:right, top;
  -webkit-transform: rotate(-90deg);
  -webkit-transform-origin:right, top;
  position: absolute;
  color: #ed217c;
}

select.dropDown{

}
div.drawButtonWrapper{
  float: left;
  width: 10%;
  margin-right:10px;
  margin-top:18px;
  height:5vh
}
.btn.drawButton{

}
div.dropDownSkeleton{
  float: left;
  width: 25%;
  margin-right:1vw;
  height:10vh;
}
.rs{
  font-size: 40px;
  margin-bottom: 25px;
}
.deSliders{
  width:18%;
  height:50%;
  float:left;
  margin-right:2%;
}
.deInput{
  padding:5px;
  width: 30px;
  float:left;
}
.deBase{
  width: 7%;
  float:left;
  margin-left:2%;
  margin-top:10px;
}


section.range-slider {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
}

section.range-slider input {
    pointer-events: none;
    position: absolute;
    overflow: hidden;
    float: left;
    outline: none;
    margin: 0;
    width: 100%;
    padding: 0;
}

section.range-slider input::-webkit-slider-thumb {
    pointer-events: all;
    position: relative;
    z-index: 1;
    outline: 0;
}

section.range-slider input::-moz-range-thumb {
    pointer-events: all;
    position: relative;
    z-index: 10;
    -moz-appearance: none;
    width: 9px;
}

section.range-slider input::-moz-range-track {
    position: relative;
    z-index: -1;
    background-color: rgba(0, 0, 0, 1);
    border: 0;
}
section.range-slider input:last-of-type::-moz-range-track {
    -moz-appearance: none;
    background: none transparent;
    border: 0;
}
  section.range-slider input[type=range]::-moz-focus-outer {
  border: 0;
}
.editButtonDropDown{
  margin-right: 100px;
  padding: 2px !important;
  padding-right: 2px !important;
  margin-right: 0px !important;
}
.projectToolTipOption{
    margin-bottom: 3px;
    background: white;
    color:black;
    padding: 3px;
    border-radius: 5px;
    font-size: 12px;
}
.editContentWrapper{
  float:left;
  width:auto;
  font-size: 14px;
  height: auto;
  padding: 5px;
  background: white;
  color:black;
  border-radius: 5px;
}
.editContentWrapper:hover:after{
  cursor: pointer;
  font-weight: bold;
}
.editContentWrapper:hover{
  font-family: lato;
  font-weight: bold;
  cursor: pointer;
}
.projectToolTipOption:hover{
  background: var(--arpeggio-navy);
  color:white;
  cursor: pointer;
}
.btn:focus {
  outline: none;
}
.btn:hover { outline: 0 !important }

.panelClear{
  box-shadow: 0 0 5px rgba(0,0,0,.5), 2px 2px 5px rgba(0,0,0,.5);
  transition: box-shadow 0.2s ease-in-out;
}
.panel{
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,.1), 2px 2px 5px rgba(0,0,0,.1);
  transition: box-shadow 0.2s ease-in-out;
}
.editPanel{
  cursor: text;
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,.1), 2px 2px 5px rgba(0,0,0,.1);
  transition: box-shadow 0.2s ease-in-out;
}
.editPanel:hover{
  box-shadow: 0 0 5px rgba(0,0,0,.25), 2px 2px 5px rgba(0,0,0,.25);
  transition: box-shadow 0.2s ease-in-out;

}
  .editProject{
  background-color: white;
  box-shadow: 0 0 8px rgba(0,0,0,.5), 4px 4px 8px rgba(0,0,0,.15);
  transition: box-shadow 0.2s ease-in-out;
  height: auto;
  color:black;
}
.projectSummary{
  position: absolute;
  left : 0;
  top : 102%;
  width:100%;
  font-size:10px;
  color:black;
  padding-left: 15px;
}
.userLogosProject{
  position: absolute;
  left : 0;
  top : calc(102% + 15px);
  width:100%;
  min-height: 50px;
  padding-left: 15px;
}


.panelInset{
  background-color: white;
  box-shadow: 0 0 5px rgba(0,0,0,.5), 2px 2px 5px rgba(0,0,0,.25);
  transition: box-shadow 0.2s ease-in-out;
}

.panel2{
  width:48%;
  height:59%;
  padding-left:1%;
  margin-right:2%;
  background-color: white;
}

.panelManage{
  float:left;
  width:10vw;
  border-radius: 20px;
  cursor: pointer;
  text-align: center;
  margin-left: 10px;
  padding:5px;
}
.panelTopRight{
  float:left;
  margin-left: 2%;
}
.panelManage:hover{
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}



.panelTopLeft{
  float:left;

}

.panelTopCenter{
  float:left;
  margin-left: 2%;
}


.footerUrl{
  font-size: 1.25vw;
  padding-top: 1.25vw;
  font-family: lato;
  text-align:left;
  padding-left:15%
}

.footerCount{
  font-size: 1.25vw;
  padding-left:1.5vw;
  font-family: lato;
}
.footerPie{
  font-size: 1.5vw;
  padding-left:1vw;
  font-family: lato;
}

.urlPanel{
  float:right;
  width: 44%;
  height: 43%;
  margin-left:4%;
  margin-top:2%;
  margin-right:2%;
  transition: linear all .1s;

}
p.manage{
  font-size: 1.25vw;
  padding-left:0.5vw;
  padding-top:0.25vw;
  font-family: lato;

}

.urlPanel:hover{
  transition: linear all .1s;
  transform: scale(1.1);
}

img.resize {
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

img.resize2 {
  height: 100%;
  width: 100%;
}
img.resize3 {
  height: 100%;
  width: 100%;
}
img.resize3:hover{
  cursor:pointer;
}
img.resize2:hover{
  cursor:pointer;
}


img.topImage{
  height: auto;
  width: auto;
  max-width: 10.5vw;
  max-height: 10.5vw;
  padding-left: 3.5vw;
  padding-top: 1.5vw;
  cursor: pointer
}

.finalFooter{
  position:fixed;
  width:75vw;
  margin-left:19.5vw;
  left:0px;
  bottom:10vh;
  height:10vh;
}

.fa-spin {
 -webkit-animation: fa-spin 0.75s infinite linear !important;
 animation: fa-spin 0.75s infinite linear !important;
}

.fa-search:hover {
  cursor: pointer;
}

// FAQ

.faq-nav {
    flex-direction: column;
    margin: 0 0 32px;
    border-radius: 2px;
    border: 1px solid #ddd;
    box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);

    .nav-link {
        position: relative;
        display: block;
        margin: 0;
        padding: 13px 16px;
        background-color: #fff;
        border: 0;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
        color: #616161;
        transition: background-color .2s ease;

        &:hover {
            background-color: #f6f6f6;
        }

        &.active {
            background-color: #f6f6f6;
            font-weight: 700;
            color: rgba(0,0,0,.87);
        }

        &:last-of-type {
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            border-bottom: 0;
        }

        i.mdi {
            margin-right: 5px;
            font-size: 18px;
            position: relative;
        }
    }
}

// TAB CONTENT
.tab-content {
    box-shadow: 0 1px 5px rgba(85, 85, 85, 0.15);

    .card {
        border-radius: 0;
    }

    .card-header {
        padding: 15px 16px;
        border-radius: 0;
        background-color: #f6f6f6;

        h5 {
            margin: 0;

            button {
                display: block;
                width: 100%;
                padding: 0;
                border: 0;
                font-weight: 700;
                color: rgba(0,0,0,.87);
                text-align: left;
                white-space: normal;

                &:hover,
                &:focus,
                &:active,
                &:hover:active {
                    text-decoration: none;
                }
            }
        }
    }

    .card-body {
        p {
            color: #616161;

            &:last-of-type {
                margin: 0;
            }
        }
    }
}


// BORDER FIX
.accordion {
    > .card {
        &:not(:first-child) {
            border-top: 0;
        }
    }
}

.collapse.show {
    .card-body {
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
}

.distLine {
  fill: none;
  stroke: #ffab00;
  stroke-width: 3;
  opacity: 0.5;
  z-index: 100;
}


div.tooltip {
  position: absolute;
  text-align: left;
  padding: 10px;
  font: 14px lato;
  color:white;
  background: black;
  width: auto;
  border: 0px;
  border-radius: 12px;
  pointer-events: none;
}

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: #999;
  stroke-opacity: 0.6;
}

.axis {
  opacity: 0.5;
  font: 10px Lato;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 4px;
  stroke-linecap: round;
}

.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 3px;
  stroke-linecap: round;
}
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

.node {
  stroke: #fff;
  stroke-width: 1.5px;
  fill: --arpeggio-blue;
}

.node .selected {
  stroke: #fff;
  stroke-width: 1.5px;
  fill: grey;
}


.axis {
  opacity: 1;
  font: 10px lato;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.axis .domain {
  fill: none;
  stroke: #000;
  stroke-opacity: 1;
  stroke-width: 1px;
  stroke-linecap: round;
}

.axis .halo {
  fill: none;
  stroke: #ddd;
  stroke-width: 3px;
  stroke-linecap: round;
}

.slider .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
  cursor: grab;
}

.centered {
  width: 150px;
  text-align: center;
  height: 100px;
  position: absolute;
  top: calc(50vh - 60px - 100px);
  left: calc(50vw + 100px);
  z-index: 9999;
}

.top_right {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 1vw;
  left: 95vw;
  z-index: 9999;
}
.bottom_right {
  width: 150px;
  text-align: center;
  height: 100px;
  position: absolute;
  top: calc(100vh - 60px - 100px);
  left: calc(100vw - 200px);
  z-index: 9999;
}

.center_right {
  float: right;
  height: 20px;
  width: 20px;
  padding-top: 20%;
  padding-right: 15%;
}

.centeredLeft {
  position: fixed;
  top: 50%;
  left: 60%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  z-index: 0;
  width: 50%;
  font-size: 150%;
}

.square {
  float: left;
  position: relative;
  width: 19vw;
  padding-bottom: 37vh; /* = width for a 1:1 aspect ratio */
  margin: 1%;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
}
.square2 {
  float: left;
  position: relative;
  width: 19vw;
  padding-bottom: 37vh; /* = width for a 1:1 aspect ratio */
  margin: 1%;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
}


.square3 {
  float: left;
  position: relative;
  width: 19vw;
  padding-bottom: 40vh; /* = width for a 1:1 aspect ratio */
  margin: 1%;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
}

.square4 {
  position: relative;
  width: 17vw;
  padding-bottom: 35vh; /* = width for a 1:1 aspect ratio */
  margin: 1%;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 25px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
}
.square5 {
  width: 150px;
  height: 150px;
  text-align: center;

  margin-right: 10px;
  position: relative;
  background-color: #ffffff;
  overflow: hidden;
  transition: all 0.3s ease;
  border-radius: 35px;
  padding:20px;
  cursor: pointer;
  box-shadow: 0 0 5px rgba(0,0,0,.05), 2px 2px 5px rgba(0,0,0,.15);
}


.square:hover,.square2:hover, .square3:hover,.square4:hover, .square5:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.flashesArp {
  padding: 1em;
  position: absolute;
  float: left;
  height: 50%;
  padding-bottom: 2em;
  width: 79%;
}
.content {
  position: absolute;
  height: 100%; /* = 100% - 2*5% padding */
  width: 100%; /* = 100% - 2*5% padding */
  padding: 4%;
  text-align: center;
  font-size: 10px;
}
.content h5{
  padding-bottom: 1vh;
  font-size: 2.5vh;
}

/*  For responsive images */

.content .rs {
  width: 15vh;
  height: 15vh;
  max-height: 200px;
  max-width: 200px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
/*  For responsive images as background */

.content_ts {
  position: absolute;
  height: 100%;
  width: 100%;
  padding: 4%;
  text-align: center;
  font-size: 10px;
}

.content_ts .rs {
  width: auto;
  height: auto;
  max-height: 150px;
  max-width: 90%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.bg {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* you change this to "contain" if you don't want the images to be cropped */
  color: black;
}

/*  following just for the demo */
.j-footer {
  text-align: left;
  font-size: 14px;
}

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: var(--arpeggio-navy);
  color: #fff;
  border-radius: 5px;
  z-index: 99999;
}

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

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

.dot {
  stroke: #fff;
  fill: steelblue;

}


.bar {
  fill: var(--arpeggio-blue);
  transition: 0.15s linear all;
}
.bar:hover {
  stroke: #fff;
  fill: var(--arpeggio-navy);
  transition: 0.15s linear all;
}

.tooltip {
  position: absolute;
  font-family: lato;
  font-size: 15px;
  width: auto;
  height: auto;
  pointer-events: none;
  background-color: white;
}
.overlayForm {
  background: #e9e9e9;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.75;
  width: 100%;
}

* {
  -webkit-box-sizing: border-box;
}
body{
    font-family: "Lato";
    font-size: 14px;
    line-height: 1.428;
    color: #333;
    background-color: #fff;
    background: #fff;
    position: relative;
}

.viz_medium_text {
  width: 99%;
  margin-left: 5px;
  margin-top: 3px;
  margin-bottom: 3px;
  color: #333;
  text-align: justify;
  font-size: 14px;
  font-weight: 300;
  padding-left: 0px;
}
.viz_large_text {
  width: 99%;
  margin: 0 auto;
  margin-top: 6px;
  margin-bottom: 3px;
  color: #333;
  text-align: justify;
  font-size: 16px;
  font-weight: 300;
  padding-left: 0px;
}
/* need to move d3-tip into stypes */
/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
.cutoffLine{
  pointer-events: none;
}
.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.icon_buttons {
  color: --arpeggio-blue;
}
.sidebar_text {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.1;
}
.sidebar_button_text {
  font-size: 13px;
  font-weight: 300;
}
.btn {
  padding-top: 2px;
  padding-bottom: 2px;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group,
.btn-group-vertical > .btn-group > .btn {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
  color: #fff;
  background-color: #286090;
  border-color: #204d74;
}
.btn.active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn {
  font-family: inherit;
  display: inline-block;
  /*padding: 6px 12px;
    */
  margin-bottom: 0;
  /*font-size: 14px;
    */
  /*font-weight: normal;
    */
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-primary {
  color: #fff;
  background-color: --arpeggio-blue;
  border-color: --arpeggio-blue;
}
.toggle_row_order {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
/* sidebar tooltips */
.sidebar_tooltip {
  position: relative;
  display: inline-block;
}
.sidebar_tooltip .sidebar_tooltip_text {
  visibility: hidden;
  width: 120px;
  background: rgba(0, 0, 0, 1);
  /*opacity: 0.95;
    */
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1000;
  top: 100%;
  /*left:-400%;
    */
  font-size: 15px;
  /*margin-left: 60px;
    */
  font-size: 13px;
  font-weight: bold;
}
.sidebar_tooltip:hover .sidebar_tooltip_text {
  visibility: visible;
}
div.awesomplete > ul {
  z-index: 99;
}
.form-control {
  font-family: inherit;
  display: block;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}
.center-right {
  width: 60%;
  float: left;
}
.center-left {
  width: 40%;
  float: left;
}
.table tr:hover {
  background-color: #f1f1f1;
}
.table thead tr:hover {
  background-color: white;
}
.table thead {
  display: block;
  text-align: left;
  position: sticky;
}
.table tbody {
  display: block;
  overflow: auto;
  position: sticky;
}
#myTable {
  table-layout: fixed;
  width: 100%;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
#opaque {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 900;
  display: none;
  background: #e9e9e9;
  filter: alpha(opacity=50);
  opacity: 0.7;
}
* html #opaque {
  position: absolute;
}
#myLoadingImage_div {
  position: relative;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 950;
  display: none;
  line-height: 800px;
}
* html #myLoadingImage_div {
  position: absolute;
}
#myLoadingImage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  display: none;
}
#form-group-description {
  width: 300px;
}
#div_background {
  position: absolute;
  text-align: center;
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 5px;
}
#div_tooltipText {
  position: absolute;
  color: black;
  font-family: Lato;
}
#div_tooltipBackground {
  position: absolute;
  background: #fff;
  /*border:0.1px solid black;*/
  /*border-radius: %;*/

  float: left;
  position: relative;
  /*width: 31.00%;*/
  margin: 1%;
  /*background-color:#ffffff;*/
  /*overflow:hidden;*/
  /*transition:all 0.3s ease;*/
  /*border-radius: 25px;    */
}
.navbar-nav {
  position: relative;
  z-index: 10000;
}

#thead_sampleID {
  width: 100px;
}
.circlesContainer {
  stroke: #000;
}
table.dataTable tbody tr:hover {
  background-color: #20b1a5 !important;
}
#container {
  width: 80vw;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: left;
  align-content: left;
}

#container2 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
  align-items: left;
  align-content: left;
}

.helpIconText {
  float: left;
}
.homepage_toolkit_list {
  text-align: left;
  padding-left: 1em;
  color: var(--arpeggio-navy);
  font-size: 15px;
}
#outerDiv {
  /*width: 50%;*/
  /*margin: 0 auto;*/
}
.backgroundGroup{
  opacity: 0.05;
  background-color: grey;
  ry:20px;
}
.simple-text-custom {
  text-transform: uppercase;
  font-size: 18px;
  text-align: center;
  font-weight: 400;
  line-height: 30px;

}
.navbar-logo {
  width: 200;
}
.simple-text-custom-username {
  text-transform: uppercase;
  font-size: 1.6vw;
  text-align: center;
  font-weight: 400;
  line-height: 30px;
  width: auto;
}
.sidebar[data-color="navy"]:after,
body > .navbar-collapse[data-color="navy"]:after {
  background: var(--arpeggio-navy);
}
.FAQlist {
  color: var(--arpeggio-navy);
}
.FAQhref {
  color: var(--arpeggio-navy);
  font-size: 18px;
}
.FAQitem {
  display: none;
}
.toolkit_href {
  color: var(--arpeggio-navy);
  font-size: 18px;
}

.input-disabled{
  background-color:#EBEBE4;
  border:1px solid #ABADB3;
}

.button-disabled {
  opacity: 0.3;
}

/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color:var(--light);
  color: #444;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: var(--arpeggio-navy);
  color: #eee;
}

/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0 0 0 0;
  background-color: var(--light);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  text-align: left;
  font-size: 12px;
}

#thePlot > #leftPanel text.xLabel:hover,
#thePlot > #leftPanel text.yLabel:hover {
  font-style: italic;
  font-weight: 400;
  cursor: pointer;
}

.axisAdjustBox {
  background-color: rgb(36, 45, 99);
  position: absolute;
  outline:black;
  outline-width: 3px;
  border-radius: 10px;
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  color: white;
  z-index: 1;
}

.axisAdjustBox input {
  width: 50px;
  border-radius: 5px;
  color: black;
}

#xAxisScale {
  height: 90px;
  width: 170px;
}

#yAxisScale {
  height: 160px;
  width: 85px;
}

#xAxisScale > h6 {
  margin-top:5px;
  margin-bottom: 1px;
}

#yAxisScale > h6 {
  margin-top:5px;
  margin-bottom: 5px;
}

#xAxisScale > .xAxisInputs {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

#yAxisScale > .yAxisInputs {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#xAxisScale .xAxisInputSection {
  display: flex;
  flex-direction: column;
}

#yAxisScale .yAxisInputSection {
  display: flex;
  flex-direction: column;
  align-items: center;
}