/***
--------------------
General
--------------------
***/
html, body, h1, h2, h3, h4, h5, h6, p, label, button, li {
  font-family: 'Open Sans', sans-serif;
  font-weight: 500; }

body {
  background-color: #eee; }
  body.no-scroll-mobile {
    position: relative;
    overflow: hidden; }

img, canvas {
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block; }

ul {
  padding: 0; }

.no-padding {
  margin: 0;
  padding: 0; }

.extra-padding {
  padding: 25px 35px; }

.full-width {
  width: 100%; }

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

div.div-padding {
  padding: 30px; }

.content {
  padding-top: 0; }

.no-scroll {
  overflow: hidden; }

hr {
  margin-top: 40px;
  margin-bottom: 40px;
  border: 0;
  border-top: 1px solid #eee;
  border-top: 1px solid #a4a4a5;
  width: 50%; }

/***
--------------------
Navigation
--------------------
***/
header {
  z-index: 10;
  position: relative; }

.navbar {
  margin: 0;
  z-index: 2000; }
  .navbar.fixed {
    position: fixed;
    width: 100%; }
  .navbar .container-fluid {
    width: 100%;
    /*display: flex;*/
    align-items: center;
    height: 70px;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
    .navbar .container-fluid .brand-container {
      /*** Logo ***/ }
      .navbar .container-fluid .brand-container .navbar-brand .logo {
        width: 250px;
        image-rendering: auto;
        vertical-align: middle;
        display: inline; }
      @media all and (max-width: 768px) {
        .navbar .container-fluid .brand-container .navbar-brand .logo {
          width: 150px; } }
    .navbar .container-fluid .links-container {
      margin-left: auto; }
      .navbar .container-fluid .links-container ul.links {
        margin: 0px;
        list-style: none; }
        .navbar .container-fluid .links-container ul.links a {
          font-weight: 700; }
  .navbar.centered .brand-container {
    margin: 0 auto; }
    .navbar.centered .brand-container a {
      padding: 0; }
  .navbar.centered .links-container {
    margin: 0;
    margin-left: initial; }

.navbar-right {
  float: right; }

.navbar li {
  list-style: none; }

.navbar a {
  color: #333;
  /* padding: 15px 0px; */
  line-height: 50px;
  font-weight: 500;
  font-size: 16px; }

.navbar a:hover {
  color: #cb2d3e;
  font-weight: bold;
  text-decoration: none; }

.navbar a:focus {
  text-decoration: none; }

.navbar-brand {
  padding: 0;
  padding-left: 20px; }

/*** Hamburger Icon ***/
.menu-container {
  display: inline-block;
  cursor: pointer;
  position: relative;
  height: 16px;
  width: 50px;
  float: left;
  /* Between small and medium*/ }
  @media (min-width: 993px) {
    .menu-container {
      display: none; } }
  .menu-container .bar1, .menu-container .bar2, .menu-container .bar3, .menu-container .bar4 {
    width: 30px;
    height: 3px;
    background-color: #333;
    /* margin: 6px 0; */
    transition: 0.4s;
    position: absolute;
    border-radius: 59px;
    border: 1px solid black; }
  .menu-container .bar1 {
    top: 0px; }
  .menu-container .bar2 {
    top: 50%; }
  .menu-container .bar3 {
    top: 50%; }
  .menu-container .bar4 {
    top: 100%; }
  .menu-container.clicked {
    /* Fade out the second bar */
    /* Rotate first bar */
    /* Rotate last bar */
    /* Rotate last bar */ }
    .menu-container.clicked .bar1 {
      opacity: 0; }
    .menu-container.clicked .bar2 {
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg); }
    .menu-container.clicked .bar3 {
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .menu-container.clicked .bar4 {
      opacity: 0; }

/***
--------------------
Button
--------------------
***/
button:focus {
  outline: none; }

.button-flat {
  color: #fff;
  background-color: #cb2d3e;
  background-image: linear-gradient(top, #ef473a, #cb2d3e);
  border: none;
  border-radius: 8px;
  margin-bottom: 20px;
  border-radius: 0;
  background-color: #eee;
  color: #333;
  border: 2px solid #676767;
  /*padding: .5em 1em;*/
  margin-right: 20px;
  transition: transform .1s;
  font-weight: bold;
  /* background-color: #e6e6e6; */
  width: 100%;
  margin: .5rem 0em;
  height: 40px;
  font-size: .85em;
  position: relative; }

.button-flat.hover, .button-flat:hover {
  border-color: #cb2d3e;
  color: #cb2d3e; }

.button-flat:active, .button-flat.active {
  box-shadow: inset 0 5px 30px #7b4d53;
  border-color: #cb2d3e;
  color: #cb2d3e;
  transform: translate(0px, 2px); }

@media all and (max-width: 768px) {
  .button-flat {
    font-size: .8em; } }
.disabled, .disabled:active, .disabled:hover {
  cursor: not-allowed;
  opacity: .65;
  border-color: grey;
  opacity: .65;
  color: grey;
  box-shadow: none;
  color: grey;
  transform: none; }

/***
--------------------
Info popup
--------------------
***/
.info-box {
  position: absolute;
  right: 1rem;
  top: 1rem;
  z-index: 110; }
  .info-box .button {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.8rem;
    border: 1px solid black;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: #e6e6e6;
    color: #333333;
    border: none;
    z-index: 50;
    box-shadow: 0.4rem 0.7rem 1rem #545454;
    background: linear-gradient(#eee, #cacaca);
    float: right;
    box-shadow: initial;
    background: #f8f8f8;
    border: 3px solid #333; }
    .info-box .button:hover {
      color: #cb2d3e;
      border-color: #cb2d3e; }
    @media (max-width: 1200px) {
      .info-box .button {
        width: 4.5rem;
        height: 4.5rem;
        font-size: 3rem; } }
  .info-box .how-to-play {
    background-color: #f8f8f8;
    width: 300px;
    /* max-width: 90%; */
    padding: 2rem 2rem 3rem 1rem;
    margin-top: 7rem;
    border: 1rem solid #cb2d3e;
    /* float: right; */
    right: 0;
    position: absolute;
    border-radius: 2rem;
    border: none;
    border-radius: 0;
    background-color: #333;
    color: white;
    /* box-shadow: 10px 10px 10px black; */
    border: 5px solid #f8f8f8; }
    .info-box .how-to-play h3 {
      text-align: center;
      /*font-family: 'Nunito Sans';*/
      font-weight: bolder;
      margin-bottom: 3rem;
      /* text-transform: uppercase; */
      font-weight: 100;
      /* letter-spacing: 1px; */ }
    .info-box .how-to-play li {
      /*font-family: 'Nunito Sans';*/
      margin: 1.5rem 0rem;
      font-size: 1em; }

/***
--------------------
Select
--------------------
***/
select {
  display: inline-block;
  margin: 0 10px 0 0;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.8;
  vertical-align: bottom;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  width: 100%;
  text-align-last: center; }

select:focus {
  outline: none; }

/***
--------------------
About
--------------------
***/
.about .container {
  z-index: 1000;
  background-color: rgba(255, 255, 255, 0.97);
  position: absolute;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  padding: 0; }
  .about .container.ng-hide {
    opacity: 0; }
  .about .container.ng-hide-add, .about .container.ng-hide-remove {
    transition: opacity linear .3s; }
  .about .container .pokeball {
    position: absolute;
    z-index: 1010;
    opacity: .3;
    /*top: 0%;*/
    right: 0%; }
    .about .container .pokeball img {
      opacity: .3;
      position: relative;
      top: -11.5em;
      right: -10em; }
  .about .container .parent {
    /*background-color: rgba(255, 255, 255, 0.97);*/
    /*position: absolute;*/
    z-index: 1020;
    width: 100%;
    height: 100%;
    /*left: 0;*/
    position: relative;
    opacity: 1;
    overflow-y: scroll;
    font-size: 16px; }
    .about .container .parent .row {
      margin: 0; }
    .about .container .parent .content {
      padding: 0px 30px; }
      .about .container .parent .content .paragraph, .about .container .parent .content ol, .about .container .parent .content li {
        /*font-family: 'Nunito Sans', sans-serif;*/ }
      .about .container .parent .content li {
        font-size: 1.3em; }
      .about .container .parent .content a {
        color: #cb2d3e;
        font-weight: bold; }
      .about .container .parent .content img.logo {
        margin: 0 auto;
        width: 400px;
        image-rendering: auto;
        max-width: 100%;
        margin-top: 120px; }
      .about .container .parent .content section {
        margin: 40px 0px;
        position: relative;
        z-index: 10px; }
        .about .container .parent .content section .section-heading {
          text-align: center;
          margin-bottom: 30px;
          font-weight: 700; }
          .about .container .parent .content section .section-heading:hover {
            /*text-decoration: underline;*/
            color: #cb2d3e; }
        .about .container .parent .content section .paragraph {
          line-height: 1.5;
          /*font-family: 'Nunito Sans';*/
          padding: .7em 0em; }
        .about .container .parent .content section p {
          font-size: 1em;
          /*font-family: 'Nunito Sans';*/
          margin: 25px 40px 25px 0px; }

/***
--------------------
Edge Weight Sliders
--------------------
***/
.edge-weight-sliders {
  height: 260px;
  display: inline-block;
  margin: 0;
  -webkit-transition: .5s linear;
  transition: height .5s linear;
  overflow-y: hidden; }

.edge-weight-sliders.ng-hide-add,
.edge-weight-sliders.ng-hide-remove {
  display: inline-block !important;
  overflow-y: hidden !important;
  height: 0px; }

.edge-weight-sliders.ng-hide-remove.ng-hide-remove-active {
  height: 260px; }

.edge-weight-sliders.ng-hide-add {
  height: 260px; }

.edge-weight-sliders.ng-hide-add.ng-hide-add-active {
  height: 0; }

.row-slider {
  margin: 10px 0px; }

.weight-header {
  font-weight: bold;
  margin: 30px 0px; }

/***
--------------------
Footer
--------------------
***/
footer {
  margin-top: 70px;
  background-color: #777;
  background-color: #333;
  position: relative;
  z-index: 100; }
  footer .container-fluid {
    padding: 2rem 0rem;
    text-align: center; }
    footer .container-fluid .row {
      margin: 0; }
    footer .container-fluid a {
      color: #f33246; }
      footer .container-fluid a:hover {
        text-decoration: underline; }
    footer .container-fluid p {
      color: white;
      color: white;
      font-size: 14px;
      font-weight: 300;
      margin: 10px 0px; }

/***
--------------------
Misc.
--------------------
***/
p.or {
  text-align: center;
  font-weight: bold;
  margin: 0;
  margin: 5px 0px; }

/***
--------------------
Gameboy/Monitor
--------------------
***/
canvas.foreground {
  position: absolute;
  top: 0;
  left: 0; }

canvas.background {
  position: relative; }

#transition {
  width: 100%;
  height: 100%;
  opacity: 0; }

/***
--------------------
Monitor
--------------------
***/
#monitor {
  border-radius: 5px;
  position: relative; }

@media (max-width: 992px) {
  .monitor-container {
    padding: 1rem; } }

.monitor-frame {
  background-color: slategrey;
  display: block;
  position: relative;
  background-color: #708090;
  position: relative;
  /* border: 0.3rem solid #4e5a65; */
  /* border-right-color: #a9b3bd; */
  /* border-top-color: #8d9aa6; */
  display: block;
  padding: 4.5em 2.5em;
  box-shadow: 40px 40px 40px #a2a2a2;
  /*    width: 100%;*/
  border-radius: 2em;
  border-radius: 3.75em;
  background-color: #333;
  margin: 2rem auto;
  width: 100%;
  text-align: center; }

.monitor.screen {
  display: inline-block;
  display: inline-block;
  background-color: #333;
  box-sizing: border-box;
  border: 0.25rem solid #c6ccd3;
  border-top-color: #384048;
  border-right-color: #4e5a65;
  /* margin: 30px 0px; */
  border-bottom-color: #a9b3bd;
  border-color: #4d4d4d;
  border-left-color: #262626;
  border-bottom-color: #262626;
  width: 90%;
  border-radius: 9px;
  position: relative;
  overflow: hidden; }

.monitor.screen .layer {
  position: absolute;
  top: 0px;
  left: 0px;
  /*max-width: 100%;*/ }

/*** Floor Label ***/
.floor-label {
  width: 55px;
  height: 55px;
  color: white;
  border-radius: 100%;
  display: inline-block;
  border: 2px solid #eeeeee;
  position: absolute;
  top: 0;
  padding: 16px 0px;
  font-weight: bold;
  left: 0;
  letter-spacing: 1px;
  background-color: #333;
  position: fixed;
  left: 408px;
  top: 50%; }

/***
--------------------
Gameboy
--------------------
***/
.gameboy.screen .frontier-wait {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(112, 128, 144, 0.4);
  z-index: 100;
  color: white;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em; }
  .gameboy.screen .frontier-wait .message p {
    font-size: 1.3rem;
    font-weight: 300;
    text-shadow: 2px 2px black; }
  .gameboy.screen .frontier-wait .message img {
    display: inline;
    width: 2.5rem;
    margin-top: 1rem; }
.gameboy.screen .layer {
  position: absolute;
  /*max-width: 100%;*/ }

.gameboy.screen #transition {
  position: absolute;
  top: 0px;
  left: 0px; }

.gameboy.screen {
  position: relative;
  overflow: hidden;
  display: inline-block;
  /*    border: 10px solid #8dd9e2; 
      width: 100%;*/ }

.gameboy.logo {
  width: 35%;
  margin: 0 auto; }

.logo-container {
  position: absolute;
  bottom: 14%;
  width: 100%;
  left: 0px;
  /* On very small devices */ }
  @media (max-width: 410px) {
    .logo-container {
      bottom: 16%; } }

/***
--------------------
User Console
--------------------
***/
/*** Side Panel ***/
.page-content {
  margin-left: 400px;
  /* Between small and medium*/ }
  @media (max-width: 992px) {
    .page-content {
      margin-left: -15px; } }

.overlay {
  position: fixed;
  background-color: rgba(33, 33, 33, 0.35);
  height: 100%;
  width: 100%;
  z-index: 50;
  /* top: 0; */
  top: 0;
  left: 0;
  /* display: none; */
  opacity: 1; }
  .overlay.ng-hide {
    opacity: 0; }
  .overlay.ng-hide-add, .overlay.ng-hide-remove {
    transition: opacity linear 0.5s; }

.side-panel {
  width: 400px;
  opacity: 1;
  position: absolute;
  z-index: 100;
  overflow: hidden;
  left: 0px;
  /* Between small and medium*/
  /* Below small (ie, xs)*/ }
  .side-panel > .row {
    margin: 0px; }
  .side-panel.fix-to-top {
    position: fixed;
    top: 0; }
  @media (max-width: 992px) {
    .side-panel {
      transition: .8s left, .5s opacity ease; }
      .side-panel.panel-closed {
        /*width: 0%;*/
        left: -500px; }
      .side-panel.panel-closed .user-console-wrapper {
        /*opacity: 0;*/ }
      .side-panel.panel-open {
        /*width: 50%;*/
        /*left: 10px;*/ }
      .side-panel.panel-open .user-console-wrapper {
        opacity: 1; } }
  @media (max-width: 500px) {
    .side-panel {
      width: 75%; }
      .side-panel.panel-closed {
        /*width: 0%;*/
        left: -600px; } }

.user-console-wrapper.container-fluid {
  height: 100vh;
  overflow-x: hidden;
  /*overflow: hidden;*/
  /*position: fixed;*/
  z-index: 100;
  font-size: 16px;
  background-color: #e6e6e6;
  /*        padding-top: 30px;
          padding-bottom: 50px;*/ }
  .user-console-wrapper.container-fluid .div-padding {
    padding-bottom: 150px; }
.user-console-wrapper section {
  margin: 20px 0px 20px 0px; }
.user-console-wrapper section .section-heading {
  margin-bottom: 25px;
  font-size: 1.1em; }
  @media all and (max-width: 768px) {
    .user-console-wrapper section .section-heading {
      font-size: .8em; } }

.console-closed {
  /*width: 0px;*/ }

.console-open {
  /*width: auto;*/
  /*width: 80%;*/ }

.user-console-wrapper.col-md-3,
.user-console-wrapper.col-md-3 {
  /*position: relative;*/ }

/*** Marker Buttons ***/
.marker-buttons.row {
  margin: 0 auto; }

.marker-buttons .button-flat.normal-border-width {
  border-left-width: 2px; }

.marker-buttons [class*='col-'] {
  padding: 0; }

.marker-buttons .button-flat {
  border-left-width: 1px; }

.marker-buttons label {
  font-size: 13px;
  font-weight: lighter;
  position: relative;
  transform: translate(50%, -40%); }

/*** Hiding PointMarker Buttons ***/
.move-pointmarker-container {
  display: inline-block;
  height: 120px;
  overflow: hidden;
  width: 100%; }

.move-pointmarker-container.ng-hide {
  height: 0; }

.move-pointmarker-container.ng-hide-add,
.move-pointmarker-container.ng-hide-remove {
  transition: height linear 0.5s; }

/*** VCR ***/
.vcr .row {
  margin: 0 auto; }

.vcr [class*='col-'] {
  padding: 0; }

.vcr .button-flat {
  border-left-width: 1px; }

.vcr .button-flat.normal-border-width {
  border-left-width: 2px; }

/*** Log ***/
.activity-log {
  border: 1px solid #cecece;
  background-color: white;
  border-radius: 3px;
  padding: 10px;
  overflow: hidden;
  font-family: monotype;
  box-shadow: inset 0 5px 30px #d0d0d0;
  min-height: 50px;
  font-size: .8em;
  position: relative;
  overflow: hidden; }
  @media all and (max-width: 960px) {
    .activity-log {
      font-size: 0.6em; } }
  .activity-log .wrapper {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    overflow-y: scroll;
    max-height: 300px;
    padding: 0px;
    padding-left: 1em; }
    .activity-log .wrapper:hover, .activity-log .wrapper:focus, .activity-log .wrapper:active {
      overflow-y: scroll; }
    .activity-log .wrapper .line {
      font-family: monospace; }
      .activity-log .wrapper .line .algorithm {
        font-weight: 900; }
      .activity-log .wrapper .line .results {
        font-weight: 900;
        color: #cb2d3e; }

i.marker-icon {
  font-size: 20px;
  opacity: 1;
  opacity: 1;
  position: absolute;
  top: 9px;
  left: 40%; }

.marker-icon.ng-hide {
  opacity: 0; }

.marker-icon.ng-hide-add,
.marker-icon.ng-hide-remove {
  transition: all linear 0.1s; }

/***
--------------------
View Switcher
--------------------
***/
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; }

/* Hide default HTML checkbox */
.switch input {
  display: none; }

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cb2d3e;
  -webkit-transition: .4s;
  transition: .4s; }

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s; }

input:checked + .slider {
  background-color: #cb2d3e; }

input:focus + .slider {
  box-shadow: 0 0 1px #cb2d3e; }

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px); }

/* Rounded sliders */
.slider.round {
  border-radius: 34px; }

.slider.round:before {
  border-radius: 50%; }

.view-switch-wrapper {
  text-align: center;
  padding-top: 40px; }

span.view-name {
  position: relative;
  bottom: 16px;
  right: 7px;
  color: #aaa;
  text-transform: uppercase;
  font-size: 13px;
  width: 80px;
  display: inline-block; }

span.view-name:nth-of-type(2) {
  right: 0px;
  left: -12px; }

span.view-name.active {
  font-weight: 700;
  color: #333;
  font-size: 14px; }

.view-animate-container {
  position: relative;
  /*height:100px!important;*/
  /*  background:white;
    border:1px solid black;*/
  /*height:40px;*/
  /*overflow:hidden;*/
  min-height: 100vh; }

.view-animate.ng-enter, .view-animate.ng-leave {
  transition: .4s opacity ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; }

.view-animate.ng-enter {
  opacity: 0; }

.view-animate.ng-leave {
  opacity: 1; }

.view-animate.ng-enter.ng-enter-active {
  opacity: 1; }

.view-animate.ng-leave.ng-leave-active {
  opacity: 0; }

/***
--------------------
Breakpoints Overlay (for design purposes)
--------------------
***/
.breakpoints {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 100;
  display: none; }

.breakpoints div {
  height: 100%;
  width: 2px;
  position: absolute; }

.breakpoints .small {
  left: 768px;
  background-color: aqua; }

.breakpoints .medium {
  left: 992px;
  background-color: crimson; }

.breakpoints .large {
  background-color: rebeccapurple;
  left: 1200px; }

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