/*.navbar-fixed-top .nav li {*/
/*  padding-top: 3px;*/
/*  font-family: junction, sans-serif;*/
/*}*/
/*#webcam-msg {*/
/*  position: absolute;*/
/*  z-index: 2;*/
/*  background: #777;*/
/*  color: #aaa;*/
/*  text-align: center;*/
/*  height: 240px;*/
/*  width: 320px;*/
/*  font-size: 14px;*/
/*}*/
/*a {*/
/*  color: #0af;*/
/*}*/
/*#webcam-msg p {*/
/*  padding: 80px 20px;*/
/*}*/
/*#webcam {*/
/*  position: absolute;*/
/*  z-index: 1;*/
/*}*/
/*#header.navbar-inner {*/
/*  margin-right: -40px;*/
/*}*/

html {
  display: block;
  width: 100%;
  height: 100%;
}

body {
  background: #f9f9f9;
  color: black;
  position: relative;
}

.full-strecth-block {
  display: block;
  width: 100%;
  height: 100%;
}

div.full-strecth-flex-vertical.content, div.full-strecth-flex-vertical {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

div.full-strecth-flex-horizontal {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}

.bs-stepper .content.dstepper-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.demo-button {
  border: none;
  color: white;
  padding: 1rem;
  border-radius: 6px;
  background-image: linear-gradient(to bottom,#08c,#04c);
}

.tab-content {
  display: flex;
  flex-direction: row;
  overflow: auto;
}

.tab-pane {
  min-width: 100%;
}

.center-content {
  align-items: center;
  justify-content: center;
}



/*hr {*/
/*  border-color: #666;*/
/*}*/

/*.modal {*/
/*  color: #333;*/
/*}*/
#graph {
  width: 1024px;
  height: 200px;
  margin: 10px 0px;
}

.bs-stepper:not(.vertical) .content.dstepper-none {
  display: initial;
}
div.content {
  position: absolute;
}

div.bs-stepper-content {
  padding: 0;
}

.bs-stepper .content.fade {
  visibility: initial !important;
}

.bs-stepper .content.fade.active, .bs-stepper-pane.fade.active {
  z-index: 90;
}

.bs-stepper .line {
  background-color: grey;
}

.step.active .step-trigger{
  color: #007bff;
}



@media only screen and (max-width: 1200px) {
  #graph {
    width: 800px;
  }
}

@media only screen and (max-width: 992px) {
  #graph {
    width: 650px;
  }
}

@media only screen and (max-width: 768px) {
  #graph {
    width: 520px;
  }
}

@media only screen and (max-width: 576px) {
  #graph {
    width: auto;
  }
}


/* Individual Component Style -------------------------------------------*/

#heightIndicatorPrev {

}

#landing-page:before {
  background-image: url('./asset/landing-wallpaper.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.3;
}
#landing-page, #landing-page2 {
  justify-content: center;
  align-items: center;
}
#landing-page-content {
  width: 70%;
  max-width: 800px;
  text-align: center;
}
#landing-page-content p {
  color: grey
}

#landing-page-content span  {
  font-size: 1.7rem;
  opacity: 0.5;
}

#stepper, .bs-stepper-header {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 25rem;
  margin: 0 auto;
  margin-top: 4rem;
  position: absolute;
  z-index: 100;
}
#stepper .dotted-line {
  width: 11rem;
  border: 1px dashed grey;
  height: 0;
}


#webcam {
  position: relative;
}

.spectrum-example-horizontal {
  text-align: center;
}

#settings, #capture {
  background: #272727;
  color: #b7b7b7
}

#capture .full-strecth-flex-horizontal {
  height: 60%;
}

#capture .full-strecth-flex-horizontal > div {
  background-color: #353535;
  height: 100%;
  box-shadow: 1px 1px 11px 2px #151515;
  border-radius: 5px;
}

#capture-phase-right .btn-group {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

#capture-phase-right > div {
  margin: 1rem
}

#capture-page-next {
  margin-top: 4rem
}

#plotting > div:first-child {
  width: 100%;
  max-width: 1000px;
}

#plotting-note {
  background: #dedede;
  max-width: 300px;
  padding: 1.5rem;
  border-radius: 5px;
}

#graph1 {
  height: 300px !important;
}


.fade.in {
  opacity: 0;
}



/* #setting {
  height: 100%;
  overflow: hidden;
} */