/*


***********************************************************


DO NOT EDIT THIS FILE -- DO NOT EDIT THIS FILE -- DO NOT EDIT THIS FILE -- DO NOT EDIT THIS FILE -- DO NOT EDIT THIS FILE -- DO NOT EDIT THIS FILE --


***********************************************************



green= #BDD533
#303030
#K, #1 to fold all
#K, #J to unfold all
*/
.testClass {
  width: 5em;
  height: 25em; }

.testBuild {
  color: green; }

@font-face {
  font-family: Gotham-Medium;
  src: url(/global/fonts/Gotham-Medium.otf); }
@font-face {
  font-family: Gotham-Book;
  src: url(/global/fonts/Gotham-Book.otf); }
@font-face {
  font-family: Gotham-Bold;
  src: url(/global/fonts/Gotham-Bold.otf); }
@font-face {
  font-family: Gotham-Light;
  src: url(/global/fonts/Gotham-Light.otf); }
@font-face {
  font-family: Gotham-Thin;
  src: url(/global/fonts/Gotham-Thin.otf); }
body {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: Gotham-Light;
  letter-spacing: .03rem; }

.hidden {
  display: none !important; }

#header, #footer {
  height: 50px;
  /* also change line-height in headerElement/footerElement */
  width: 100%;
  background-color: #BDD533;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5000; }

#content {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  color: black;
  position: absolute;
  /* was relative */
  left: 0;
  top: 60px;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background-color: white; }

.section {
  position: relative;
  /* */ }

#section-browse {
  height: 100%; }

.headerElement, .footerElement {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 33.333%;
  height: 100%;
  line-height: 50px;
  /* needs to be same as height of div */
  float: left;
  text-align: center;
  color: #303030;
  font-size: 80%;
  letter-spacing: 0.2em;
  overflow: hidden;
  /*border-top: 1px solid white;*/ }

#header1, #header2, #button-home, #button-new, #radio1x, #radio2x, #edit-radio1x, #edit-radio2x {
  /* adds border between header/footer divs */
  border-right: 1px solid white;
  /* */ }

.nav-button-active {
  font-family: Gotham-Bold; }

.nav-button-inactive {
  font-family: Gotham-Light; }

.sn-button {
  width: 100%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: black;
  font-size: 80%;
  /*color: #ff00ff;*/
  color: white;
  margin-top: 5px;
  /*margin-bottom: 1px;*/ }

.sn-button:hover, .sn-button-aths {
  color: white;
  /* */ }

.sn-button-aths {
  width: 45%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  background-color: black;
  font-size: 80%;
  /*color: #ff00ff;*/
  color: white;
  margin-top: 5px;
  /*margin-bottom: 1px;*/
  display: inline-block; }

.aths-button-wrapper {
  text-align: center; }

.save-new-card {
  /* save button for new card */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  z-index: 100;
  margin-top: 0;
  border-bottom: 1px solid #323232;
  background-color: gray;
  height: 50px;
  line-height: 50px;
  color: white; }

.sn-button2 {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: black;
  font-size: 80%;
  /*color: #ff00ff;*/
  color: white;
  border-bottom: 1px solid #323232;
  /*margin-top: 1px;*/
  /*margin-bottom: 1px;*/ }

.sn-button2last {
  border: none !important;
  /* */ }

.save-edit-card, .delete-edit-card {
  /*save button on edit */
  position: fixed;
  /*bottom: 100px;*/
  z-index: 100;
  background-color: gray;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 0px !important; }

#edit-content {
  position: absolute;
  top: 0;
  /*height: 100px;*/
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.new-card-scroll-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.browse-edit-card-2 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: fixed;
  top: 100px;
  background-color: gray;
  height: 50px !important;
  line-height: 50px;
  color: white;
  z-index: 100; }

.text-input-single-line-wrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: black;
  margin-top: 5px;
  width: 100%;
  height: 60px; }

.text-input-multi-line-wrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: black;
  margin-top: 5px;
  width: 100%;
  height: 150px; }

.text-input-wrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 60%;
  height: 100%;
  float: left;
  padding-left: 10px;
  padding-right: 10px; }

.text-input-single-line {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: 100%;
  height: 1.5em;
  border-top: none;
  border-left: none;
  border-right: none;
  -moz-border-radius: 0;
  /* Firefox */
  -webkit-border-radius: 0;
  /* Safari, Chrome */
  -khtml-border-radius: 0;
  /* KHTML */
  border-radius: 0;
  /* CSS3 */
  vertical-align: middle;
  margin-top: 18px; }

.text-input-multi-line {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  font-size: 100%;
  border-top: none;
  border-left: none;
  border-right: none;
  -moz-border-radius: 0;
  /* Firefox */
  -webkit-border-radius: 0;
  /* Safari, Chrome */
  -khtml-border-radius: 0;
  /* KHTML */
  border-radius: 0;
  /* CSS3 */
  vertical-align: middle;
  margin-top: 18px; }

.text-input-multi-line-wrapper-edit {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: black;
  margin-top: 5px;
  width: 100%;
  height: 150px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top: 5px; }

.text-input-edit-experience {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  /* this is not the best - should be 60% */
  height: 100px;
  background-color: white;
  /*float:left;*/
  /*margin-left: 10px;*/
  /*margin-right: 10px;*/
  /*margin-top: 20px;*/
  padding: 5px;
  font-size: 80%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch; }

.input-copy-edit-experience {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 35px;
  line-height: 35px;
  overflow: hidden;
  font-size: 80%;
  text-align: center;
  /*float: left;*/
  color: white;
  letter-spacing: 0.2em;
  /*padding-top: 6px;*/ }

.edit-experience-spacer {
  width: 20px;
  height: 30px;
  float: left; }

.input-copy {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 40%;
  height: 100%;
  line-height: 60px;
  overflow: hidden;
  font-size: 80%;
  text-align: right;
  float: left;
  color: white;
  letter-spacing: 0.2em;
  right: 10px; }

.fade {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  z-index: 1000;
  opacity: 0.0; }

.radio-wrapper {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 5px; }

.radio-button {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 80%;
  /*display: inline-block;*/
  float: left;
  height: 100%;
  width: 33.33%;
  background-color: black;
  color: gray;
  position: relative;
  top: 0; }

.radio-button2 {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 80%;
  /*display: inline-block;*/
  float: left;
  height: 100%;
  width: 50%;
  background-color: black;
  color: gray;
  position: relative;
  top: 0;
  line-height: 1.5em;
  padding-top: 10px; }

.track {
  letter-spacing: .2em;
  /* */ }

.round {
  border-radius: 25px;
  /* */ }

.select-intro {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 5px;
  text-align: center;
  background-color: black;
  color: white;
  font-size: 80%; }

.select-option {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  font-size: 80%;
  height: 60px;
  width: 100%;
  border-top: 1px solid #212121;
  background-color: black;
  color: white;
  line-height: 60px; }

.options {
  opacity: 0;
  /* */ }

.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: white; }

.no-top-margin {
  margin-top: 0px !important;
  /* */ }

.no-border {
  border: none !important;
  border-color: black !important; }

.checkbox-wrapper {
  width: 100%;
  height: 60px;
  text-align: center;
  background-color: black;
  font-size: 80%;
  color: white; }

.checkbox-inner {
  display: inline-block;
  /* */ }

.checkbox {
  width: 20px;
  height: 20px;
  background-color: white;
  margin-left: 20px;
  float: left;
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  color: black;
  font-family: Gotham-Bold;
  line-height: 20px;
  padding: 0; }

.checkbox-label {
  position: relative;
  top: 0;
  margin-left: 20px;
  color: white;
  float: left;
  line-height: 60px; }

.hair {
  border-bottom: 1px solid #323232;
  /* */ }

.radio-sep {
  border-right: 1px solid #323232;
  /* */ }

.red {
  color: red;
  /* */ }

.dark-orange {
  color: darkorange; }

.home-popup-content, #home-message {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
  padding-right: 10px; }

/* from old css below*/
.page-login {
  font-family: Gotham-Book;
  letter-spacing: .03rem; }

.center {
  text-align: center;
  /* */ }

hr {
  border-top: 0.1px solid #e4e4e4;
  border-left: none;
  border-bottom: none;
  border-right: none; }

.lockup1 {
  width: 100%;
  height: auto; }

.need-help {
  font-size: 80%;
  /* */ }

.inline-link {
  color: blue;
  text-decoration: none; }

.message21 {
  font-size: 70%;
  padding-left: 10px;
  padding-right: 10px; }

.i-am-21 {
  font-weight: bold;
  color: red; }

strong {
  font-family: Gotham-Bold;
  /* */ }

/* slider ------------------------------------------------ */
.slider1 {
  /*removes default webkit styles*/
  -webkit-appearance: none;
  /*fix for FF unable to apply focus style bug */
  border: 0px solid blue;
  /*required for proper track sizing in FF*/
  /*width: 300px;*/
  width: 93%; }

.slider1:focus {
  outline: none;
  /* */ }

.slider1::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: DarkOrange;
  /*adjust thumb vertically on track */
  margin-top: -14px; }

.slider1::-moz-range-thumb {
  border: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: DarkOrange; }

.slider1::-ms-thumb {
  border: none;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: DarkOrange; }

.slider1::-webkit-slider-runnable-track {
  width: 30%;
  height: 0.1px;
  background: DarkOrange;
  border: none; }

.slider1:focus::-webkit-slider-runnable-track {
  background: #ccc;
  /* */ }

.slider1::-moz-range-track {
  width: 80%;
  height: 1px;
  background: black;
  border: none; }

/*hide the outline behind the border*/
.slider1:-moz-focusring {
  outline: 1px solid blue;
  outline-offset: -1px; }

.slider1::-ms-track {
  width: 80%;
  height: 1px;
  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
  background: transparent;
  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;
  /*remove default tick marks*/
  color: transparent; }

.slider1::-ms-fill-lower {
  background: black;
  /* */ }

.slider1::-ms-fill-upper {
  background: black;
  /* */ }

.slider1:focus::-ms-fill-lower {
  background: black;
  /* */ }

.slider1:focus::-ms-fill-upper {
  background: black;
  /* */ }

.slider-group {
  position: relative;
  left: 0;
  top: 0;
  height: 220px;
  margin-top: 20px; }

#slider-group-1 {
  opacity: 0; }

.slider-section-left {
  float: left;
  width: 30%;
  height: 100px;
  padding-top: 30px; }

.slider-name {
  font-size: 80%;
  height: 38.5px;
  padding-left: 5px;
  text-align: right; }

.slider-section-right {
  position: relative;
  top: 0;
  width: 65%;
  height: 100%;
  display: inline-block;
  box-sizing: border-box; }

.tick-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10; }

.tick {
  border-right: 1px solid LightGray;
  width: 48px;
  height: 220px;
  display: inline-block;
  vertical-align: top;
  text-align: right;
  font-size: 60%;
  box-sizing: border-box;
  position: relative; }

.tick-first {
  border-right: 1px dotted transparent !important;
  width: 17px !important; }

.slider-wrapper {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100% !important;
  box-sizing: border-box; }

.slider-wrapper-each {
  margin-top: 35px;
  width: 100% !important;
  z-index: 20; }

.dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: lightgray;
  position: absolute;
  z-index: 200;
  /* was 12 */ }

#dot-holder {
  background-color: yellow;
  height: 10px;
  width: 10px;
  position: absolute;
  top: 0;
  left: 0; }

.slider-door {
  width: 100%;
  height: 60px;
  line-height: 60px;
  margin-top: 5px;
  background-color: black;
  text-align: center;
  color: white;
  font-size: 80%; }

/* end slider ------------------------------------------------ */
.fa-star-green {
  color: DarkOrange;
  /* */ }

.fa-star-gray {
  color: lightgray;
  /* */ }

.fa-star {
  /*margin-right: 10px;*/
  /* */ }

.fa-caret-right-closed {
  vertical-align: -0.17em; }

.fa-caret-right-open {
  vertical-align: -0.21em; }

.star-wrapper-new {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 14px;
  width: 100%;
  height: 60px;
  text-align: center;
  background-color: black; }

.star-browse {
  text-decoration: none;
  outline: none;
  font-size: 80% !important;
  text-align: center; }

.star-wrapper-browse {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 5px; }

.inactiveLink {
  pointer-events: none;
  /* */ }

.browse-experience-wrapper {
  width: 100%;
  /*height: 100px;*/
  /*background-color: lightgray;*/
  /*position: relative;*/ }

.browse-line-label-experience {
  float: left;
  /*position: absolute;*/
  /*top: 0;*/
  /*background-color: lightblue;*/
  display: inline-block;
  /*position: absolute;*/
  /*top: 0;*/
  color: gray;
  width: 40%;
  overflow: hidden;
  font-size: 80%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.browse-line-data-experience {
  /*background-color: yellow;*/
  float: left;
  /*position: absolute;*/
  /*top: 0;*/
  display: inline-block;
  color: black;
  width: 60%;
  /*height: 100%;*/
  overflow-wrap: break-word;
  padding-right: 5px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 80%; }

.browse-line-label {
  display: inline-block;
  color: gray;
  width: 50%;
  overflow: hidden;
  font-size: 80%;
  text-align: right; }

.browse-line-data {
  display: inline-block;
  color: black;
  width: 50%;
  overflow: hidden;
  font-size: 80%; }

.browse-full-width {
  display: inline-block;
  color: black;
  width: 100%;
  overflow: hidden;
  font-size: 80%;
  text-align: center; }

.browse-full-width-exp {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: inline-block;
  color: black;
  width: 100%;
  overflow: hidden;
  font-size: 80%;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  font-family: Gotham-Book; }

.gap-between-graphs {
  height: 13px;
  width: 10px;
  /*background-color: green;*/ }

.p-spacer {
  margin: 0;
  padding: 0;
  height: 80%; }

.strain {
  color: DarkOrange;
  font-family: Gotham-Bold;
  font-size: 100%; }

.slide-block {
  display: inline-block;
  height: 15px;
  width: 15px;
  margin-right: 3px;
  background-color: lightgray;
  border-radius: 50%; }

.slide-block-color {
  background-color: darkorange !important;
  /* */ }

.browse-line-label-slider {
  display: inline-block;
  color: gray;
  width: 50%;
  line-height: 120%;
  font-size: 80%;
  text-align: right; }

#browse-nav-bar {
  /*background-color: lightgray;*/
  height: 30px;
  width: 100%;
  /*border-bottom: 1px solid black;*/
  background-color: black;
  position: fixed;
  top: 0;
  z-index: 100;
  opacity: 0.25; }

.card-slick {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  /*height: 800px;*/ }

.card-slick-content {
  /*padding-left: 10px;*/
  padding-top: 30px;
  /* same as height of browse-nav-bar */
  /*overflow-y: scroll;*/
  /*-webkit-overflow-scrolling: touch;*/ }

.slick-dots {
  /* fix positioning */
  position: relative !important;
  bottom: 0 !important; }

.slick-dots li.slick-active button:before {
  color: white !important;
  opacity: 1.0 !important;
  /*font-size: 10px !important;*/
  font-weight: bolder !important; }

.slick-dots li button:before {
  color: white !important;
  opacity: 0.4 !important; }

.no-cards {
  margin-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.version {
  text-align: center;
  font-size: 50%; }

.resetPasswordMessage, .loginMessage {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding-left: 30px;
  padding-right: 30px; }

.fancy-button-delete {
  background-color: red;
  color: white;
  font-size: 100%;
  outline: none;
  text-decoration: none;
  border: none;
  padding: 15px; }

.aths-img {
  width: 80%;
  border: 1px solid LightGray; }

.aths-wrapper {
  text-align: center; }

.whatForCopy {
  margin-left: 10px;
  margin-right: 10px; }

.exampleScreenWrapper {
  text-align: center; }

/*# sourceMappingURL=main.css.map */
