/* http://google-webfonts-helper.herokuapp.com/fonts/open-sans?subsets=latin */
/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v15-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Regular"), local("OpenSans-Regular"), url("../fonts/open-sans-v15-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v15-latin-regular.woff2") format("woff2"), url("../fonts/open-sans-v15-latin-regular.woff") format("woff"), url("../fonts/open-sans-v15-latin-regular.ttf") format("truetype"), url("../fonts/open-sans-v15-latin-regular.svg#OpenSans") format("svg");
  /* Legacy iOS */ }

/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/open-sans-v15-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../fonts/open-sans-v15-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/open-sans-v15-latin-700.woff2") format("woff2"), url("../fonts/open-sans-v15-latin-700.woff") format("woff"), url("../fonts/open-sans-v15-latin-700.ttf") format("truetype"), url("../fonts/open-sans-v15-latin-700.svg#OpenSans") format("svg");
  /* Legacy iOS */ }

html, body {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  /*overflow: hidden;*/
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome and Opera */ }

button {
  padding: 0; }

.testSliderContainer {
  margin-top: 20px;
  margin-bottom: 20px; }

.logo {
  width: 175px;
  height: auto;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 110px; }

.greenText {
  color: #444444; }

.icon {
  fill: #444444; }

.fixed-nav {
  position: fixed;
  /*
    bottom: 0;
    */
  top: 0;
  left: 0px;
  right: 0;
  height: 80px;
  border-bottom: 2px solid #fff;
  overflow: hidden;
  z-index: 50;
  /*
    box-shadow: 0.5px 0px 8px 0px #000000;
    */ }

.fixed-nav .fixed-nav-inner {
  position: absolute;
  top: 0;
  left: 0px;
  right: 0;
  bottom: 0;
  padding: 15px 25px 15px 357px;
  border-bottom: 2px solid #444444;
  background-color: white;
  overflow: hidden;
  display: inline-block; }

.fixed-nav .nav {
  display: inline-block;
  width: 200px;
  margin-bottom: 15px;
  cursor: pointer;
  letter-spacing: .5px;
  outline: none; }

.fixed-nav .nav span {
  display: inline-block;
  background-color: #fff;
  color: #444444;
  height: 45px;
  width: 45px;
  border-radius: 8px;
  border: 2px solid #444444;
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  vertical-align: -5px;
  margin-right: 3px;
  transition: .6s; }

.fixed-nav .nav.nav-active span, .fixed-nav .nav:hover span {
  background-color: #444444;
  color: #fff; }

/* .fixed-nav .nav.nav-active-whiteLabel span, .fixed-nav .nav:hover {
    background-color: $whiteLabel;
    color: #fff;
} */
/* .fixed-nav .nav:hover span, .fixed-nav .nav.nav-active:hover span {

} */
.nav-title {
  margin-top: 15px;
  margin-bottom: 20px;
  padding: 6px 16px;
  text-align: center;
  letter-spacing: .5px;
  font-weight: bold;
  color: #444444;
  border-bottom: 2px solid #444444; }

#renderCanvas {
  top: 0px;
  left: 350px;
  position: absolute;
  width: 100%;
  width: calc(100% - 350px);
  height: 100%;
  touch-action: none; }

.fixedForm {
  position: fixed;
  top: 80px;
  left: 0;
  bottom: 0;
  width: 350px;
  overflow: auto;
  background-color: white;
  z-index: 50;
  padding: 15px;
  /*
    box-shadow: 0.5px 0px 8px 0px #000000;
    */ }

.fixedForm::-webkit-scrollbar-track {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

.fixedForm::-webkit-scrollbar {
  width: 4px;
  background-color: #F5F5F5; }

.fixedForm::-webkit-scrollbar-thumb {
  background-color: #444444; }

.fixedForm h3 {
  margin-top: 5px; }

.fixedForm input, .fixedForm select {
  width: 100%; }

.placeholder {
  height: 1px;
  width: 100%;
  background-color: rgba(126, 126, 126, 0.83);
  margin-bottom: 50px;
  margin-top: 25px; }

.greenRangeSlider {
  float: left;
  -webkit-appearance: none;
  appearance: none;
  max-width: 200px; }

.greenRangeSlider:focus {
  outline: none; }

.greenRangeSlider::-webkit-slider-runnable-track {
  cursor: pointer;
  height: 2px;
  margin-top: 14px;
  margin-bottom: 14px;
  background-color: rgba(40, 40, 40, 0.53);
  outline: none;
  opacity: 0.7;
  -webkit-opacity: .2s;
  transition: .2s; }

.greenRangeSlider::-webkit-slider-thumb:hover {
  transition: .6s;
  opacity: 1;
  width: 16px;
  height: 16px; }

.greenRangeSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background-color: #444444;
  cursor: pointer;
  outline: none;
  margin-top: -7px; }

.greenRangeSlider::-moz-range-track {
  cursor: pointer;
  height: 2px;
  margin-top: 14px;
  margin-bottom: 14px;
  background-color: rgba(40, 40, 40, 0.53);
  outline: none;
  opacity: 0.7;
  /* -webkit-opacity: .2s; */
  transition: .2s; }

.greenRangeSlider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background-color: #444444;
  opacity: 0.99; }

.greenRangeSlider::-moz-focus-outer {
  border: 0; }

.greenRangeSlider::-ms-thumb {
  width: 15px;
  height: 15px;
  border-radius: 10px;
  background-color: #444444;
  cursor: pointer;
  outline: none;
  margin-top: 0px; }

.greenRangeSlider::-ms-track {
  height: 2px;
  cursor: pointer;
  background: rgba(40, 40, 40, 0.53);
  border-color: #444444;
  border-style: none;
  color: transparent;
  margin-top: 14px;
  margin-bottom: 14px;
  opacity: 0.7;
  transition: .2s; }

/* .greenRangeSlider::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.greenRangeSlider:focus::-ms-fill-lower {
  background: #3071a9;
}
.greenRangeSlider::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
.greenRangeSlider:focus::-ms-fill-upper {
  background: #367ebd;
} */
.slideContainerWidth {
  max-width: 320px; }

.sliderInput {
  outline-color: #444444;
  text-align: center;
  margin-left: 15px;
  padding-right: 0px;
  float: left;
  height: 30px;
  max-width: 50px;
  border: none;
  border-bottom: 2px solid rgba(40, 40, 40, 0.43); }

.sliderInput:focus {
  border-bottom: 2px solid #444444; }

.sliderInputFalse {
  outline-color: red;
  text-align: center;
  margin-left: 15px;
  padding-right: 0px;
  float: left;
  height: 30px;
  max-width: 50px;
  border: none;
  border: 2px solid rgba(255, 0, 0, 0.7);
  border-radius: 2px; }

.sliderInputFalse:focus {
  border-bottom: 2px solid red; }

.inputgroup {
  width: 100%;
  max-height: 30px;
  margin-bottom: 30px; }

.inputgroup:after {
  content: "";
  display: table;
  clear: both; }

.fixedForm input[type="radio"], .fixedForm input[type="checkbox"] {
  width: initial; }

.fixedForm table td {
  vertical-align: top; }

.greenSelect {
  margin: 1px;
  margin-bottom: 5px;
  outline-color: #444444;
  border: none;
  font-size: 15px;
  height: 35px;
  max-width: 100%;
  border-bottom: 2px solid #444444; }

.btnRequest {
  float: right;
  margin-top: 50px;
  margin-right: 15px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  color: #444444;
  text-align: center;
  background-color: #ffffff; }

.btnRequest:hover {
  transition: .6s;
  background-color: #444444;
  color: #ffffff; }

.backToWebsite {
  float: right;
  margin-top: 50px;
  margin-right: 15px;
  width: 150px;
  height: 40px;
  border: 2px solid #444444;
  color: #444444;
  text-align: center;
  background-color: #ffffff; }

.backToWebsite:hover {
  transition: .6s;
  background-color: #444444;
  color: #ffffff; }

.tab2Cont {
  width: 100%;
  z-index: 0; }

.firstLabelContainer {
  padding-left: 5px;
  margin-bottom: 2px;
  font-size: 12px;
  color: rgba(126, 126, 126, 0.83); }

.roofBtn, .roofBtnActive {
  float: left;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  color: #444444;
  text-align: center;
  background-color: #ffffff; }

.roofBtn:hover {
  transition: .6s;
  background-color: #444444;
  color: #ffffff; }

.roofBtnActive {
  color: #ffffff;
  background-color: #444444; }

.roofBtnActive:hover {
  transition: .6s;
  background-color: #ffffff;
  color: #444444; }

.wallFront {
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white; }

.wallFront:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.wallFrontActive {
  color: white;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444; }

.wallFrontActive:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.wallBack {
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white; }

.wallBack:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.wallBackActive {
  color: white;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444; }

.wallBackActive:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.wallLeft {
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white; }

.wallLeft:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.wallLeftActive {
  color: white;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444; }

.wallLeftActive:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.wallRight {
  z-index: 4;
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white; }

.wallRight:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.wallRightActive {
  z-index: 4;
  color: white;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444; }

.wallRightActive:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.allWallsOn {
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white; }

.allWallsOn:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.allWallsOnDisabled {
  color: #8c8c8c;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #8c8c8c;
  text-align: center;
  background-color: white;
  z-index: 4;
  outline: none; }

.allWallsOnDisabled:hover {
  cursor: not-allowed; }

.allWallsOff {
  color: #444444;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: white;
  z-index: 4; }

.allWallsOff:hover {
  transition: .6s;
  background-color: #444444;
  color: white; }

.allWallsOffDisabled {
  color: #8c8c8c;
  float: left;
  margin: 5px;
  width: 100px;
  height: 40px;
  border: 2px solid #8c8c8c;
  text-align: center;
  background-color: white;
  z-index: 4;
  outline: none; }

.allWallsOffDisabled:hover {
  cursor: not-allowed; }

.plusBtn {
  color: white;
  margin-left: 5px;
  width: 40px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444;
  font-size: 20px;
  padding: 0; }

.plusBtn:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.doubleBtns:after {
  content: "";
  display: table;
  clear: both; }

.doubleBtn {
  color: white;
  margin: 10px 0;
  width: 150px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444;
  padding: 0;
  float: right; }

.doubleBtn:first-child {
  float: left; }

.doubleBtn i.fas, .doubleBtn i.far {
  font-size: 20px;
  vertical-align: middle;
  margin-left: 2px;
  margin-right: 2px; }

.doubleBtnInv, .doubleBtn:hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.doubleBtnInv:hover {
  background-color: #444444;
  color: white; }

.doubleBtn:disabled {
  background-color: #bebebe;
  border-color: #bebebe;
  color: #fff; }

.doubleBtnInv:disabled {
  background-color: white;
  border-color: #bebebe;
  color: #bebebe; }

.max {
  width: 100%; }

hr {
  border: 0;
  height: 1px;
  margin: 25px 0;
  padding: 0;
  border-top: 1px solid rgba(126, 126, 126, 0.83); }

.footer {
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid rgba(126, 126, 126, 0.83);
  margin-bottom: 50px; }

.footerContent {
  font-weight: 400;
  text-align: center;
  color: rgba(126, 126, 126, 0.83);
  font-size: 12px; }

/* 3D RECTANGLE FOR SELECT */
#tridiv {
  z-index: 3;
  perspective: 800px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 200px;
  background: transparent;
  font-size: 100%; }

.face {
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4); }

.scene, .shape, .face, .face-wrapper, .cr {
  position: absolute;
  transform-style: preserve-3d; }

.scene {
  z-index: 0;
  width: 80em;
  height: 80em;
  top: 50%;
  left: 50%;
  margin: -40em 0 0 -40em; }

.shape {
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-origin: 50%; }

.face, .face-wrapper {
  overflow: hidden;
  transform-origin: 0 0;
  backface-visibility: visible;
  /* hidden by default, prevent blinking and other weird rendering glitchs */ }

.face {
  background-size: 100% 100% !important;
  background-position: center; }

.face-wrapper .face {
  left: 100%;
  width: 100%;
  height: 100%; }

.photon-shader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%; }

.side {
  left: 50%; }

.cr, .cr .side {
  height: 100%; }

[class*="cuboid"] .ft-false, [class*="cuboid"] .bk-false, [class*="cuboid"] .ft-true, [class*="cuboid"] .bk-true {
  width: 97%;
  height: 100%; }

[class*="cuboid"] .bk-false, [class*="cuboid"] .bk-true {
  left: 100%; }

[class*="cuboid"] .lt-false, [class*="cuboid"] .lt-true {
  transform: rotateY(-90deg) translateX(-50%); }

[class*="cuboid"] .rt-false, [class*="cuboid"] .rt-true {
  transform: rotateY(90deg) translateX(-50%); }

[class*="cuboid"] .tp {
  transform: rotateX(90deg) translateY(-50%); }

[class*="cuboid"] .bm {
  transform: rotateX(-90deg) translateY(-50%); }

[class*="cuboid"] .rt-false, [class*="cuboid"] .rt-true {
  left: 100%; }

[class*="cuboid"] .bm {
  top: 100%; }

/* .cub-1 styles  */
.cub-1 {
  transform: translate3D(0em, 0em, 0em) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  opacity: 1;
  width: 5em;
  height: 5em;
  margin: -2.5em 0 0 -2.5em; }

.cub-1 .ft-false, .cub-1 .ft-true {
  transform: translateZ(2.5em); }

.cub-1 .bk-false, .cub-1 .bk-true {
  transform: translateZ(-2.5em) rotateY(180deg); }

.cub-1 .lt-false, .cub-1 .rt-false, .cub-1 .lt-true, .cub-1 .rt-true {
  width: 5em;
  height: 5em; }

.cub-1 .tp, .cub-1 .bm {
  width: 5em;
  height: 5em; }

/* NOT CLICKED RECTANGLE */
.cub-1 .face {
  background-color: #FFFFFF;
  text-align: center; }

.cub-1 .ft-false {
  background-color: #385a1f;
  text-align: center; }

.cub-1 .bk-false {
  background-color: #385a1f;
  text-align: center; }

.cub-1 .rt-false {
  background-color: #385a1f;
  text-align: center; }

.cub-1 .lt-false {
  background-color: #385a1f;
  text-align: center; }

/* NOT CLICKED HOVER RECTANGLE  */
.cub-1 .ft-false:hover {
  background-color: #444444; }

.cub-1 .bk-false:hover {
  background-color: #444444; }

.cub-1 .rt-false:hover {
  background-color: #444444; }

.cub-1 .lt-false:hover {
  background-color: #444444; }

/* CLICKED RECTANGLE  */
.cub-1 .ft-true {
  background-color: #444444; }

.cub-1 .bk-true {
  background-color: #444444; }

.cub-1 .rt-true {
  background-color: #444444; }

.cub-1 .lt-true {
  background-color: #444444; }

/* CLICKED RECTANGLE TRUE  */
.cub-1 .ft-true:hover {
  background-color: #385a1f; }

.cub-1 .bk-true:hover {
  background-color: #385a1f; }

.cub-1 .rt-true:hover {
  background-color: #385a1f; }

.cub-1 .lt-true:hover {
  background-color: #385a1f; }

.directionButtonContainer {
  position: relative;
  height: 115px;
  margin-top: 10px; }

.directionButtonContainer button {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  width: 40px;
  height: 40px;
  border: 2px solid #444444;
  text-align: center;
  background-color: #444444;
  font-size: 20px;
  padding: 0; }

.directionButtonContainer button:disabled {
  background-color: #bebebe;
  border-color: #bebebe; }

.directionButtonContainer button::hover {
  transition: .6s;
  background-color: white;
  color: #444444; }

.directionButtonContainer button.directionButtonUp {
  left: 50px;
  top: 0; }

.directionButtonContainer button.directionButtonDown {
  left: 50px;
  top: 50px; }

.directionButtonContainer button.directionButtonLeft {
  left: 0;
  top: 50px; }

.directionButtonContainer button.directionButtonRight {
  left: 100px;
  top: 50px; }

.directionButtonContainer button.directionButtonUp2 {
  left: 210px;
  top: 0; }

.directionButtonContainer button.directionButtonDown2 {
  left: 210px;
  top: 50px; }

.directionButtonContainer button.directionButtonLeft2 {
  left: 160px;
  top: 50px; }

.directionButtonContainer button.directionButtonRight2 {
  left: 260px;
  top: 50px; }

/* for modal: */
.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
  cursor: default; }

.modal {
  display: block;
  pointer-events: none; }

.modal .modal-dialog {
  pointer-events: auto;
  overflow-y: initial !important; }

.modal .modal-body {
  max-height: calc(100vh - 250px);
  overflow-y: auto; }

.modal .greenSelect {
  float: none;
  width: 100%; }

.btn-primary {
  background-color: #444444; }

.btn-primary:hover {
  background-color: #444444; }

.displayButton {
  min-width: 0px;
  width: 102px;
  margin-top: -5px;
  text-transform: lowercase;
  text-align: end;
  font-weight: bold; }

.dialogInfoText {
  font-weight: lighter;
  font-size: 8pt;
  color: unset; }

.dialogInfoError {
  font-weight: bold;
  font-size: 8pt;
  color: red; }

.dialogArrowBt {
  width: 36pt;
  min-width: 0pt; }

.formCheckboxText {
  font-weight: normal;
  font-size: 10pt; }

.helpTooltip {
  height: auto !important;
  max-width: 200px !important;
  overflow: visible !important;
  white-space: normal !important;
  background-color: white !important;
  color: black !important;
  margin-left: 25px !important; }

.dialogSmallText {
  font-size: 10pt; }

.watermark {
  top: auto;
  right: auto;
  left: 370px;
  bottom: 20px;
  position: absolute; }

#watermark {
  width: 180px;
  opacity: 0.4; }

md-select .md-select-value.md-select-placeholder {
  color: #444444; }

md-input-container.md-default-theme:not(.md-input-invalid).md-input-has-value label, md-input-container:not(.md-input-invalid).md-input-has-value label {
  color: black; }

md-input-container label {
  color: black; }

md-toast.md-top {
  top: 80px; }

md-input-container label:not(.md-container-ignore).lower-label {
  bottom: 80%; }

.md-toolbar-tools, .modal-top-bar {
  background-color: #444444 !important; }

.md-primary {
  background-color: #444444 !important;
  color: white !important; }

.md-select-menu {
  color: #444444 !important;
  background-color: #444444 !important; }

.md-active {
  color: #444444 !important; }

.no-margin {
  margin: 0px;
  padding-top: 2px;
  padding-bottom: 2px; }

tr {
  white-space: nowrap; }

.hint-text {
  font-size: 14px;
  font-weight: bold;
  margin-top: -1px;
  margin-bottom: 21px;
  text-align: center; }