@import "/?originalUrl=https%3A%2F%2Fshadingreference.com%2Fdat.gui.css";
body {
  margin: 0;
  background: #202632;
  color: white;
  font-family: "Exo 2", sans-serif;
  color: rgb(180.6097560976, 189.5365853659, 207.3902439024);
}
body.editorOpen {
  overflow: hidden;
}
body.dragging {
  cursor: move;
}

.banner {
  text-align: center;
  background: #ca5834;
  color: rgb(255, 225.6987951807, 191);
  padding: 0.75em 0.5em;
}
.banner a, .banner a:visited {
  color: rgb(255, 249.0481927711, 242);
  position: relative;
}
.banner a:hover, .banner a:visited:hover {
  color: white;
  text-shadow: 0 1px 0 rgb(141.1614173228, 61.4960629921, 36.3385826772);
  top: -1px;
}

canvas {
  display: block;
}

body > footer {
  background: rgb(26.0292682927, 30.9097560976, 40.6707317073);
  padding: 2em 0;
  text-align: center;
}
body > footer i {
  margin: 0 0.5em;
}
body > footer a {
  color: #ea8840;
}
body > footer a:hover {
  color: #ffb359;
}
body > footer .feedback-popup {
  display: none;
}
body > footer .feedback-popup.visible {
  display: block;
}
body > footer .feedback-popup form {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
}
body > footer .feedback-popup form textarea {
  background: rgb(20.0585365854, 23.8195121951, 31.3414634146);
  border-radius: 1em;
  border: none;
  width: 30em;
  padding: 0.75em 1em;
  color: rgb(211.7073170732, 216.9024390244, 227.2926829268);
}
body > footer .feedback-popup form button {
  background: rgb(71.8048780488, 85.2682926829, 112.1951219512);
  border: none;
  border-radius: 0.5em;
  font-size: 1em;
  margin: 0.5em;
  padding: 0.5em 1.5em;
  color: rgb(211.7073170732, 216.9024390244, 227.2926829268);
  cursor: pointer;
}
body > footer .feedback-popup form button:hover {
  background: rgb(91.7073170732, 108.9024390244, 143.2926829268);
  color: white;
}

.wrapper {
  max-width: 1200px;
  margin: 1em auto;
}

section.wrapper p {
  max-width: 700px;
  margin: 1em auto;
}
section.wrapper p.begin {
  text-align: center;
  font-style: italic;
  font-size: 1.2em;
  color: rgb(91.7073170732, 108.9024390244, 143.2926829268);
}
section.wrapper > h1 {
  color: #ea8840;
  font-weight: 900;
  font-size: 2.5em;
  display: flex;
  align-items: center;
  cursor: default;
  pointer-events: none;
  margin-left: -1em;
  justify-content: center;
}
section.wrapper > h1 img {
  margin-right: 0.25em;
}
section.wrapper > h1 span {
  color: #ffb359;
  padding-left: 0.25em;
}
section.wrapper h2 {
  text-transform: capitalize;
}
section.wrapper .examples {
  margin-top: 3em;
}
section.wrapper .examples > div {
  text-align: center;
}
section.wrapper .examples h2 {
  text-align: center;
  border-bottom: solid 0.125em rgb(28.0195121951, 33.2731707317, 43.7804878049);
  margin: 0.5em auto;
  display: inline-block;
  padding: 0 2em 0.25em;
}
section.wrapper .example-holder {
  display: flex;
  overflow: hidden;
  width: 100%;
  justify-content: center;
}
section.wrapper .example-holder img {
  width: 256px;
  height: 256px;
  margin-right: 1em;
  border-radius: 1em;
  margin: 0.25em 1em 0.25em 0;
  position: relative;
  cursor: pointer;
}
section.wrapper .example-holder img:hover {
  background: rgb(45.9317073171, 54.543902439, 71.7682926829);
  box-shadow: 0 0.25em rgb(22.0487804878, 26.1829268293, 34.4512195122);
  top: -0.25em;
}
section.wrapper .example-holder img:active {
  background: rgb(45.9317073171, 54.543902439, 71.7682926829);
  top: 0;
  box-shadow: none;
}

#threes-container {
  display: flex;
  background: rgb(12.0975609756, 14.3658536585, 18.9024390244);
  padding: 1em;
  border-radius: 1em;
  position: fixed;
  height: 90vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loading-model {
  position: absolute;
  width: calc(100% - 2em - 245px);
  font-weight: bold;
  box-sizing: border-box;
  text-align: center;
  font-size: 2em;
  top: calc(50% - 1em);
  display: none;
}
#loading-model.visible {
  display: block;
}

body:not(.editorOpen) #threes-container {
  display: none;
}

#gui {
  margin: 0 0 0 2em;
}
#gui li {
  background: none;
  border: 0;
  font-family: "Exo 2", sans-serif;
  font-size: 1rem;
  margin: 0.25em 0;
}
#gui li.title {
  font-weight: bold;
  background-color: rgb(22.0487804878, 26.1829268293, 34.4512195122);
  margin-top: 1em;
}
#gui li input {
  background: rgb(2.1463414634, 2.5487804878, 3.3536585366);
  border-radius: 0.25em;
}
#gui li.boolean .c input {
  display: none;
}
#gui li.boolean .c label {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 65%;
  position: relative;
  background-color: #020303;
  border-radius: 0.25em;
  pointer-events: none;
}
#gui li.boolean .c label::after {
  content: "disabled";
  margin-left: 2em;
  color: rgb(71.8048780488, 85.2682926829, 112.1951219512);
  font-style: italic;
  position: relative;
  top: -0.125em;
}
#gui li.boolean .c input:checked + label {
  background-image: url("/?originalUrl=https%3A%2F%2Fshadingreference.com%2Fimages%2Fcheckmark.png");
}
#gui li.boolean .c input:checked + label::after {
  content: "enabled";
}
#gui li select {
  background-color: #202632;
  color: rgb(180.6097560976, 189.5365853659, 207.3902439024);
  border-radius: 0.25em;
  padding: 0 1em 0 0.5em;
  background-image: url("/?originalUrl=https%3A%2F%2Fshadingreference.com%2Fimages%2Fselect-arrow.png");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: 95% 10px;
  appearance: none;
  border: none;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  line-height: inherit;
  outline: none;
}
#gui li select::-ms-expand {
  display: none;
}
#gui li.subOption {
  display: none;
}
#gui.showToonOptions li.subOption.toon {
  display: block;
}
#gui .close-button {
  display: none;
}
/*# sourceMappingURL=maps/shape-shading-reference-tool.css.map */